侧滑和radiobutton跳转

本文详细介绍了一种基于Android的布局设计方案,通过使用DrawerLayout实现侧滑菜单,并结合ViewPager和RadioGroup来创建底部导航栏。文章还展示了如何通过ListView设置侧边栏的点击事件,并与ViewPager进行联动。
一、布局文件
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bwei.demo5.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />


        <RadioGroup
            android:id="@+id/rg"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb1"
                android:gravity="center_horizontal"
                android:button="@null"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="首页"/>

            <RadioButton
                android:id="@+id/rb2"
                android:gravity="center_horizontal"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:text="我的" />

            <RadioButton
                android:id="@+id/rb3"
                android:gravity="center_horizontal"
                android:button="@null"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="个人"/>

        </RadioGroup>

    </RelativeLayout>


    <ListView
        android:id="@+id/lv"
        android:background="#ff00ff"
        android:layout_gravity="start"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"></ListView>


</android.support.v4.widget.DrawerLayout>

二、主acti里
public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private DrawerLayout drawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawer = (DrawerLayout) findViewById(R.id.drawer);
        vp = (ViewPager) findViewById(R.id.vp);
        RadioGroup rg = (RadioGroup) findViewById(R.id.rg);
        RadioButton rb1 = (RadioButton) findViewById(R.id.rb1);
        RadioButton rb2 = (RadioButton) findViewById(R.id.rb2);
        RadioButton rb3 = (RadioButton) findViewById(R.id.rb3);

       final ListView lv = (ListView) findViewById(R.id.lv);

        LvAdapter ada = new LvAdapter(this);
        lv.setAdapter(ada);

        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        vp.setAdapter(adapter);



        /*
        listView点击事件
         */
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                vp.setCurrentItem(position);
                drawer.closeDrawer(lv);
            }
        });

    }
}
### Checkbox RadioButton 的区别及使用场景 #### 基本功能差异 Checkbox RadioButton 是两种常见的 UI 组件,用于表单交互中的多选或多选项的选择操作。Checkbox 支持多个选项的同时选择,而 RadioButton 则限定用户只能在一个预设的组内选择单一选项[^1]。 #### 外观与行为特性 - **Checkbox**: 表现为方框样式,点击后会显示勾选标记。适用于允许用户从一组选项中选择任意数量的情况。例如,在筛选条件中可以选择多个标签或属性。 - **RadioButton**: 显示为圆形按钮,通常以组的形式存在。当用户在一个组内的某个 RadioButton 上进行选择时,其他已选中的同组 RadioButton 将被取消选中。这种设计强制用户做出唯一选择[^2]。 #### 技术实现方式 无论是 Vue.js 还是 React 中,这两种控件都可以通过绑定数据模型来动态更新其状态。例如: 对于 Vue 实现: ```javascript <template> <div> <!-- CheckBox --> <input type="checkbox" v-model="checkedFruits" value="Apple"> Apple<br> <input type="checkbox" v-model="checkedFruits" value="Orange"> Orange<br> <!-- Radio Button --> <input type="radio" v-model="pickedColor" value="Red"> Red<br> <input type="radio" v-model="pickedColor" value="Blue"> Blue<br> </div> </template> <script> export default { data() { return { checkedFruits: [], // 可以存储多个值 pickedColor: '' // 单一值 }; } }; </script> ``` 上述代码展示了如何利用 `v-model` 来双向绑定复选框单选钮的状态。其中 `checkedFruits` 数组可以保存多个水果名称,而 `pickedColor` 字符串仅能保存一种颜色[^3]。 #### 动画效果支持 如果需要增强用户体验,可以通过动画库或者框架内置的功能为这些组件添加过渡效果。比如在切换 RadioButton 或者勾选/取消勾选 Checkbox 时加入淡入淡出或其他视觉反馈机制。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值