AS 选项切换效果

来源：互联网发布：域名注册可靠吗编辑：程序博客网时间：2024/06/16 11:18

1.效果图

2.说明

页面其实就是2个button，自定义了4个shape

其他实现的方式很多，我选取了此种

3.其中使用的shape

(1).shapleft.xml

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient android:angle="90"        android:endColor="@android:color/transparent"        android:startColor="@android:color/transparent"/>    <corners android:bottomLeftRadius="15dp"        android:bottomRightRadius="0dp"        android:topLeftRadius="15dp"        android:topRightRadius="0dp"/>    <stroke        android:width="1dip"        android:color="#ffffffff"/></shape>

(2).shapeleft_focus.xml

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient android:angle="90"        android:endColor="#ffdddddd"        android:startColor="#ffdddddd"/>    <corners android:bottomLeftRadius="15dp"        android:bottomRightRadius="0dp"        android:topLeftRadius="15dp"        android:topRightRadius="0dp"/>    <stroke        android:width="1dip"        android:color="#ffffffff"/></shape>

(3).shaperight.xml

<?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient android:angle="90"        android:endColor="@android:color/transparent"        android:startColor="@android:color/transparent"/>    <corners android:bottomLeftRadius="0dp"        android:bottomRightRadius="15dp"        android:topLeftRadius="0dp"        android:topRightRadius="15dp"/>    <stroke        android:width="1dip"        android:color="#ffffffff"/></shape>

(4).shaperight_focus.xml

<pre name="code" class="html"><?xml version="1.0" encoding="UTF-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient android:angle="90"        android:endColor="#ffdddddd"        android:startColor="#ffdddddd"/>    <corners android:bottomLeftRadius="0dp"        android:bottomRightRadius="15dp"        android:topLeftRadius="0dp"        android:topRightRadius="15dp"/>    <stroke        android:width="1dip"        android:color="#ffffffff"/></shape>

4.页面布局 xml

<pre name="code" class="html"><RelativeLayout                android:layout_width="wrap_content"                android:layout_height="wrap_content">                <Button                    android:id="@+id/btnBrand"                    android:layout_width="100dp"                    android:layout_height="35dp"                    android:background="@drawable/shapeleft_focus"                    android:text="品牌"                    android:textColor="#ffffffff" />                <Button                    android:id="@+id/btnCondition"                    android:layout_width="102dp"                    android:layout_height="35dp"                    android:layout_marginLeft="98dp"                    android:background="@drawable/shaperight"                    android:text="筛选"                    android:textColor="#ffffffff" />            </RelativeLayout>

5.后台代码实现

{Button btnBrand;    Button btnCondition;        @Override    public View onCreate(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        btnBrand = (Button) view.findViewById(R.id.btnBrand);        btnCondition = (Button) view.findViewById(R.id.btnCondition);btnBrand.setOnClickListener(new TabClick());        btnCondition.setOnClickListener(new TabClick());    }    class TabClick implements View.OnClickListener{        @TargetApi(Build.VERSION_CODES.JELLY_BEAN)        @Override        public void onClick(View v) {            switch (v.getId()){                case R.id.llBrand:                    btnBrand.setBackground(getResources().getDrawable(R.drawable.shapeleft_focus));                    btnCondition.setBackground(getResources().getDrawable(R.drawable.shaperight));                    break;                case R.id.llCondition:                    btnBrand.setBackground(getResources().getDrawable(R.drawable.shapeleft));                    btnCondition.setBackground(getResources().getDrawable(R.drawable.shaperight_focus));                    break;            }        }    }}

0 0