实现常见左减右加布局UI

最新推荐文章于 2023-06-23 08:48:45 发布

原创最新推荐文章于 2023-06-23 08:48:45 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用XML定义按钮样式的方法，包括未选中和选中状态下的不同样式，并通过LinearLayout布局将三个按钮（减、显示数值、加）水平排列，实现了简单的计数器功能。

颜色

<color name="gray">#808080</color><!--灰色 -->

<color name="white">#FFFFFF</color><!--白色 -->

左shape

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--未点击时-->
    <item  android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <solid android:color="@color/white" />

            <padding
                android:bottom="1dp"
                android:top="1dp" />

            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />

            <stroke
                android:width="1dp"
                android:color="@color/gray" />

        </shape>
    </item>
    <!--点击时-->
    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <solid android:color="@color/gray" />

            <padding
                android:bottom="1dp"
                android:top="1dp" />

            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />

            <stroke
                android:width="1dp"
                android:color="@color/gray" />

        </shape>
    </item>

</selector>

中间shape

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- 边框颜色值 -->
            <item>
                <shape>
                    <solid android:color="@color/gray"/>
                </shape>
            </item>
            <!-- 主体背景颜色值 -->
            <item
                android:bottom="1dp"
                android:top="1dp">
                <shape>
                    <solid android:color="@color/white"/>
                    <padding
                        android:bottom="5dp"
                        android:left="5dp"
                        android:right="5dp"
                        android:top="5dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item  android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

            <!-- 边框颜色值 -->
            <item>
                <shape>
                    <solid android:color="@color/gray"/>
                </shape>
            </item>
            <!-- 主体背景颜色值 -->
            <item
                android:bottom="1dp"
                android:top="1dp">
                <shape>
                    <solid android:color="@color/gray"/>

                    <padding
                        android:bottom="5dp"
                        android:left="5dp"
                        android:right="5dp"
                        android:top="5dp"/>
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

右shape

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!--未点击时-->
    <item  android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <solid android:color="@color/white" />

            <padding
                android:bottom="1dp"
                android:top="1dp" />

            <corners
                android:bottomRightRadius="5dp"
                android:topRightRadius="5dp" />

            <stroke
                android:width="1dp"
                android:color="@color/gray" />

        </shape>
    </item>
    <!--点击时-->
    <item  android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <solid android:color="@color/gray" />

            <padding
                android:bottom="1dp"
                android:top="1dp" />

            <corners
                android:bottomRightRadius="5dp"
                android:topRightRadius="5dp" />

            <stroke
                android:width="1dp"
                android:color="@color/gray" />

        </shape>
    </item>
</selector>

主布局：

<LinearLayout
    android:orientation="horizontal"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:id="@+id/btn_reduce"
        android:text="-"
        android:clickable="true"
        android:background="@drawable/left"
        android:layout_width="30dp"
        android:layout_height="30dp" />
    <Button
        android:id="@+id/btn_text"
        android:text="1"
        android:clickable="false"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:background="@drawable/middle"/>
    <Button
        android:id="@+id/btn_add"
        android:text="+"
        android:clickable="true"
        android:background="@drawable/right"
        android:layout_width="30dp"
        android:layout_height="30dp" />
</LinearLayout>

Acitity

Button btn_reduce,btn_text,btn_add;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
}

private void init() {
    btn_reduce=(Button)findViewById(R.id.btn_reduce);
    btn_reduce.setOnClickListener(this);
    btn_add=(Button)findViewById(R.id.btn_add);
    btn_add.setOnClickListener(this);
    btn_text=(Button)findViewById(R.id.btn_text);
}

@Override
public void onClick(View view) {
    switch (view.getId()){
        case R.id.btn_reduce:
            reduce();
            break;
        case R.id.btn_add:
            add();
            break;
    }
}

/**
 * 加
 */
private void add() {
    int number=Integer.parseInt(btn_text.getText().toString());
    if (number>99){
        return;
    }else{
        int addnumber=number+1;
        btn_text.setText(addnumber+"");
    }

}

/**
 * 减
 */
private void reduce() {
    int number=Integer.parseInt(btn_text.getText().toString());
    if (number<2){
        return;
    }else{
        int addnumber=number-1;
        btn_text.setText(addnumber+"");
    }
}