Android(安卓): RadioBotton—— 图片浏览器

用RadioButton做一个图片浏览器

主窗口布局：navigationpoint_lay.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:background="#d111">    <FrameLayout        android:layout_marginTop="50dp"        android:layout_width="match_parent"        android:layout_height="wrap_content">                <ImageView            android:id="@+id/img"            android:layout_width="match_parent"            android:layout_height="400dp"            android:src="@mipmap/meizi4"/>                    <RadioGroup              android:id="@+id/rg_picIndex"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:orientation="horizontal"              android:layout_gravity="end|bottom"              android:layout_marginBottom="15dp"              android:layout_marginEnd="15dp">          RadioGroup>                    <Button              android:id="@+id/btn_toLeft"              android:layout_width="60dp"              android:layout_height="60dp"              android:gravity="center"              android:background="@drawable/btn_bg_sel"              android:text="L"              android:textSize="30dp"              android:textColor="#ddd"              android:layout_gravity="start|center_vertical"/>                   <Button            android:id="@+id/btn_toRight"            android:layout_width="60dp"            android:layout_height="60dp"            android:gravity="center"            android:background="@drawable/btn_bg_sel"            android:text="R"            android:textSize="30dp"            android:textColor="#ddd"            android:layout_gravity="end|center_vertical"/>        FrameLayout>LinearLayout>

Button 背景样式：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"          android:shape="oval">        <size android:width="60dp" android:height="60dp"/>        <corners android:radius="30dp"/>        <stroke android:color="#0f0"/>        <gradient android:startColor="#90f0" android:endColor="#90f0"/>shape><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"          android:shape="oval">        <size android:width="60dp" android:height="60dp"/>        <corners android:radius="30dp"/>        <stroke android:color="#0f0"/>        <gradient android:startColor="#9111" android:endColor="#9111"/>shape><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">         <item android:state_pressed="true" android:drawable="@drawable/btn_point_bg"/>         <item android:drawable="@drawable/btn_point_bg2"/>selector>

图片左下方的导航点用RadioButton做，保证每次只能选取其中的一个来导航到相应的图片，下面是RadioButton的xml定义，在主代码中根据图片的数量动态添加RadioButton。

radio_child.xml:
android:button=”@null”：去除RadioButton的button，自定义其样式
android:drawableTop=”@drawable/rb_bg_sel”
在其上插入资源（自定义背景），根据其选择状态确定背景资源，原理跟上面Button一样。

<?xml version="1.0" encoding="utf-8"?><RadioButton xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginEnd="12dp"             android:drawableTop="@drawable/rb_bg_sel"             android:button="@null">RadioButton>

主代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener, RadioGroup.OnCheckedChangeListener {      //将图片的id放入int数组中      private static final int[] picIds={R.mipmap.meizi1,R.mipmap.meizi2,R.mipmap.meizi3,        R.mipmap.meizi4,R.mipmap.meizi5,R.mipmap.meizi6,R.mipmap.meizi7};      private RadioGroup rg_picindex;      private Button btn_toLeft;      private Button btn_toRight;      private ImageView img;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.navigationpoint_lay);        rg_picindex=(RadioGroup)findViewById(R.id.rg_picIndex);        btn_toLeft=(Button)findViewById(R.id.btn_toLeft);        btn_toRight=(Button)findViewById(R.id.btn_toRight);        img=(ImageView) findViewById(R.id.img);        LayoutInflater inflater=LayoutInflater.from(this);        for (int i = 0; i < picIds.length ; i++) {        //获得radio_child.xml中的RadioButton            View view=inflater.inflate(R.layout.radio_child,rg_picindex,false);           //设置其id，这样可以id对应图片数组中图片            view.setId(i);            //将radiobutton添加到RadioGroup中            rg_picindex.addView(view);        }        //设置默认选择第一个radiobutton        rg_picindex.check(0);        btn_toLeft.setOnClickListener(this);        btn_toRight.setOnClickListener(this);        rg_picindex.setOnCheckedChangeListener(this);    @Override    public void onClick(View v) {        int picIndex = rg_picindex.getCheckedRadioButtonId();       switch (v.getId()) {               case R.id.btn_toLeft:               picIndex--;               if (picIndex < 0) {                   picIndex = picIds.length - 1;               }                   Drawable drawable = getResources().getDrawable(picIds[picIndex]);                   img.setImageDrawable(drawable);                   rg_picindex.check(picIndex);               break;           case R.id.btn_toRight:               picIndex++;               if (picIndex >= picIds.length) {                   picIndex = 0;               }               Drawable drawable2 = getResources().getDrawable(picIds[picIndex]);               img.setImageDrawable(drawable2);               rg_picindex.check(picIndex);               break;       }       }    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {       //获得选择的radiobutton id对应图片数组中的图片资源        Drawable drawable = getResources().getDrawable(picIds[checkedId]);        img.setImageDrawable(drawable);    }}

用RadioButton做一个图片浏览器

更多相关文章

随机推荐