Recyclerview的一些个人理解与使用(四)在界面中实现侧边栏效果

来源:互联网 发布:李叫兽真的是大神知乎 编辑:程序博客网 时间:2024/06/03 22:47

目录:
Recyclerview的一些个人理解与使用(一)adapter的简单封装
Recyclerview的一些个人理解与使用(二)实现一个简单的列表界面
Recyclerview的一些个人理解与使用(三)列表中的计时器
Recyclerview的一些个人理解与使用(四)在界面中实现侧边栏效果
Recyclerview的一些个人理解与使用(五)Recyclerview的联动,时间选择的实现
Recyclerview的一些个人理解与使用(六)Recyclerview的分段加载
Recyclerview的一些个人理解与使用(七)Recyclerview的嵌套与增加删除

距离上次写文章有点久,产品提了一个很奇怪的需求,做了两周没有搞好,结果决定让前端用H5实现了。。。
上次的文章地址:

http://blog.csdn.net/ljwztn/article/details/69568760

有时候,一些应用需要一个侧边栏,以便在本界面实现更多的功能,今天,我就为大家带来一个侧边栏的Recyclerview,制作的比较简陋,效果图如下:
这里写图片描述

侧边栏为一个item为checkBox的Recyclerview,以便于实现点击后图片的切换,右侧是一个textview,用来展示左侧选中的文字,上代码:
先是一个枚举,用来初始化侧边栏的一些基本参数。

/** * Created by ztn on 2017/4/19 */public enum SideBarType {    ONE("SideBar\n第一个", "SideBar第一个", R.drawable.sidebar_icon, 1, true),    TWO("SideBar\n第二个", "SideBar第二个", R.drawable.sidebar_icon, 2, false),    THREE("SideBar\n第三个", "SideBar第三个", R.drawable.sidebar_icon, 3, false),    FOUR("SideBar\n第四个", "SideBar第四个", R.drawable.sidebar_icon, 4, false),    FIVE("SideBar\n第五个", "SideBar第五个", R.drawable.sidebar_icon, 5, false),    SIX("SideBar\n第六个", "SideBar第六个", R.drawable.sidebar_icon, 6, false),    SEVEN("SideBar\n第七个", "SideBar第七个", R.drawable.sidebar_icon, 7, false),    EIGHT("SideBar\n第八个", "SideBar第八个", R.drawable.sidebar_icon, 8, false),    NIGHT("SideBar\n第九个", "SideBar第九个", R.drawable.sidebar_icon, 9, false),    TEN("SideBar\n第十个", "SideBar第十个", R.drawable.sidebar_icon, 10, false),    ELEVEN("SideBar\n第十一个", "SideBar第十一个", R.drawable.sidebar_icon, 11, false),    TWELVE("SideBar\n第十二个", "SideBar第十二个", R.drawable.sidebar_icon, 12, false),    THIRTEEN("SideBar\n第十三个", "SideBar第十三个", R.drawable.sidebar_icon, 13, false),    FOURTEEN("SideBar\n第十四个", "SideBar第十四个", R.drawable.sidebar_icon, 14, false);    public String text;//左边显示    public String content;//右边显示    public int resid;//类型图片    public int type;//类型标志    public boolean isChecked;//是否选中    SideBarType(String text, String content,int resid, int type, boolean isChecked) {        this.text = text;        this.content=content;        this.resid = resid;        this.type = type;        this.isChecked = isChecked;    }}

在这个枚举中,我定义了5个参数,分别用来表示了在界面中实现的几个效果,比较要的是resid 代表的是图片的drawable,其中放了选中个未选中的两个图片:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/new_1" android:state_checked="false" />    <item android:drawable="@drawable/new_2" android:state_checked="true" /></selector>

在界面中,我们创建SideBarType 的List,在适配器中对点击的item的展示作出处理,Activity代码如下:

/** * Created by ztn on 2017/4/13 */public class SideBarRecyclerViewActivity extends BaseActivity {    SideBarRecyclerViewActivityHolder sideBarRecyclerViewActivityHolder;    List<SideBarType> sideBarTypeList;    SideBarType sideBarType = SideBarType.ONE;    SideBarRecyclerViewAdapter sideBarRecyclerViewAdapter;    public static Intent newIntent(Context context) {        return new Intent(context, SideBarRecyclerViewActivity.class);    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_sidebar);        sideBarRecyclerViewActivityHolder = new SideBarRecyclerViewActivityHolder(this);        sideBarTypeList = new ArrayList<>();        //数组中加入需要的侧边栏,这里我用的枚举,随意构造了一个类型        sideBarTypeList = Arrays.asList(SideBarType.ONE,                SideBarType.TWO,                SideBarType.THREE,                SideBarType.FOUR,                SideBarType.FIVE,                SideBarType.SIX,                SideBarType.SEVEN,                SideBarType.EIGHT,                SideBarType.NIGHT,                SideBarType.TEN,                SideBarType.ELEVEN,                SideBarType.TWELVE,                SideBarType.THIRTEEN,                SideBarType.FOURTEEN);        sideBarRecyclerViewAdapter = new SideBarRecyclerViewAdapter(getContext(), sideBarTypeList);        sideBarRecyclerViewActivityHolder.recyclerView.setAdapter(sideBarRecyclerViewAdapter);        //点击侧边栏后的效果        sideBarRecyclerViewAdapter.setOnClickItemListener(new SideBarRecyclerViewAdapter.OnClickItemListener() {            @Override            public void onClick(SideBarType sideBarType1) {                sideBarType = sideBarType1;                reTypedata(sideBarType);                Toast.makeText(getContext(), "点击了" + sideBarType.content, Toast.LENGTH_SHORT).show();            }        });        reTypedata(sideBarType);    }    /**     * 重置数据,保证看起来只有一个被选中     */    private void reTypedata(SideBarType sideBarType) {        for (SideBarType sideBarType1 : sideBarTypeList) {            sideBarType1.isChecked = sideBarType1 == sideBarType;        }        sideBarRecyclerViewActivityHolder.textView.setText(sideBarType.text);        sideBarRecyclerViewAdapter.notifyDataSetChanged();    }}

adapter:

/** * Created by ztn on 2017/4/28 */public class SideBarRecyclerViewAdapter extends SimpleRecycleViewAdapter<SideBarType, SideBarRecyclerViewHolder> {    private OnClickItemListener onClickItemListener;    public SideBarRecyclerViewAdapter(Context context, List<SideBarType> listData) {        super(context, listData);    }    /**     * 创建View     *     * @param parent     * @return     */    @Override    protected SideBarRecyclerViewHolder onCreateItemViewHolder(ViewGroup parent) {        return new SideBarRecyclerViewHolder(inflater.inflate(R.layout.activity_sidebar_rl_item, parent, false));    }    public void setOnClickItemListener(OnClickItemListener onClickItemListener) {        this.onClickItemListener = onClickItemListener;    }    /**     * 给View设置数据     *     * @param sideBarRecyclerViewHolder     * @param position     */    @Override    protected void onBindItemViewHolder(SideBarRecyclerViewHolder sideBarRecyclerViewHolder, int position) {        sideBarRecyclerViewHolder.initView(context, listData.get(position), onClickItemListener, position);    }    /**     * 便于实现点击事件     */    public interface OnClickItemListener {        void onClick(SideBarType sideBarType);    }}

adapter的对应的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    android:paddingBottom="2dp"    android:paddingTop="2dp">    <CheckBox        android:id="@+id/sidebar_item_cb"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/b_count_type_text_bg"        android:button="@null"        android:clickable="false"        android:enabled="false"        android:focusable="false"        android:gravity="center"        android:maxLines="2"        android:minLines="1"        android:padding="8dp"        android:textColor="#000000"        android:textSize="12sp"/>    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#1d60ac"/></LinearLayout>

这里对button属性设置为@null,可以去除控件本身的选中框框,该属性对类似控件也有相同效果。

adapter的holder:

/** * Created by ztn on 2017/4/28 */public class SideBarRecyclerViewHolder extends RecyclerView.ViewHolder {    CheckBox checkBox;    public SideBarRecyclerViewHolder(View itemView) {        super(itemView);        checkBox = (CheckBox) itemView.findViewById(R.id.sidebar_item_cb);    }    public void initView(Context context, final SideBarType sideBarType,                         final SideBarRecyclerViewAdapter.OnClickItemListener onClickItemListener,                         final int position) {        checkBox.setCompoundDrawablesWithIntrinsicBounds(0, sideBarType.resid, 0, 0);        checkBox.setChecked(sideBarType.isChecked);        checkBox.setText(sideBarType.text);        itemView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if (onClickItemListener != null)                    onClickItemListener.onClick(sideBarType);            }        });    }}

这个侧边栏实现起来比较简单,希望对大家有所帮助。
项目地址:

https://github.com/Liveinadream/RecyclerViewDemo#recyclerviewdemo

如有疑问大家可以添加 121606151 这个qq群@Crazy(即本人)即可,欢迎大家前来交流。

0 0
原创粉丝点击