Android : RadioBotton—— 图片浏览器

用RadioButton做一个图片浏览器

主窗口布局：navigationpoint_lay.xml

---

<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 背景样式：

<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>



<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>



<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一样。

<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);
    }


}