自定义控件 防腾讯视频分类视图（1）

   最近做到一个视频项目，要求防腾讯视频的效果，包括首页，频道管理，和分类视图，自己写了一个首页，和一个分类视图，在网上看到了一个频道管理的已经有了高仿源码，就直接拿过来用了，这里贴上频道管理原文链接：

点击打开链接

     先上效果图：

       仔细看了一下腾讯视频的分类视图界面，最顶部是两大类型，最新，最热， 当选择最新最热的时候，下面的子栏目其实没有发生变化，变化的只有一个最下方的listview的数据，也就是大类型和子类型之间其实没有关联关系，

如果有关联关系，就需要在每次点击大类型的时候，重新clear掉在HorizontalScrollView中动态添加的标签（ps:动态标签外面必须用一层布局包含进去，因为HorizontalScrollView中不允许有多个view），然后每次都重新加载一遍，也就是重新动态添加一遍；

没有关联关系的话，只需要自定义一个视图，在自定义视图中创建一个linearylayout和一个横向的scroolview，动态添加scrollview中的元素，当然，linearlayout和scrollview中的view都要添加单击事件监听，事件监听只需要在自定义视图中实现，定义一个接口，暴露给外界，别忘记在定义接口方法的时候，传入当前大类型的id和小类型的ID哟！然后实现该接口的方法，这样，调用的时候，你就获取到了大类型的ID和小类型的ID，你就可以根据这个ID，来获取你想要的数据了，动态刷新你的下方的listview了。

       代码实现的原理大概就是这样子的，可能表达不清楚，那么就直接上代码吧！

package com.kindlion.media.view;import java.util.ArrayList;import java.util.List;import com.kindlion.media.R;import com.kindlion.media.tool.DataTools;import android.content.Context;import android.util.AttributeSet;import android.view.Gravity;import android.view.View;import android.widget.FrameLayout;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import android.widget.TextView;public class MyTypeView extends LinearLayout {/** * 存储大类型的textview */private List<TextView> titleListView;/** * 存储子类型的textview */private List<TextView> childTitleListView;//大分类的容器LinearLayout titleLayout;//横向列表的滑动视图private HorizontalScrollView mHorizontalScrollView;private LinearLayout mlayout ;private Context mContext;//设置子控件带panddingbottom 和 panddingtop属性的值private int viewPaddingBottom = 5;//设置子控件带 PaddingLeft 和 panddingright属性的值private int viewPaddingLeft = 10;//大的分类的数据源List<TypeBean> typeList = new ArrayList<TypeBean>();//子分类的数据源List<TypeBean> childTypeList = new ArrayList<TypeBean>();//纪录子类型选中的idprivate int childId = 0;//纪录大类型选中的位置private int typeId = 0;private int topBottom = 0;private int leftRight = 0;//判断大类型有没有被点击的锁 ，避免重复的点自己，刷新数据boolean flag = false;//默认需要不可以触发子类型点点击事件因为第一次加载点时候已经加载了子类//是否需要更新子类视图boolean updateChildEnable = false;//定义的接口，暴露给外部，实现点击事件的逻辑处理，使用set方法暴露private onItemClickListener  typeItemClickListener;public MyTypeView(Context context, AttributeSet attrs) {super(context, attrs);this.setOrientation(LinearLayout.VERTICAL);}/** * 初次调用 初始化视图 * @param mContext 上下文 * @param typeList 大类型的数据源（这里因为大类型不是HorizontalScrollView，只是一个线性布局，所以数量不宜多） * @param childTypeList 子类型的数据源  */public void OnViewInit(Context mContext,List<TypeBean> typeList,List<TypeBean> childTypeList) {this.mContext = mContext;this.typeList = typeList;this.childTypeList = childTypeList;initView(mContext);//创建视图，初始化控件，并设置事件监听}private void initView(Context context) {topBottom = DataTools.dip2px(context, viewPaddingBottom);leftRight = DataTools.dip2px(context, viewPaddingLeft);//创建顶部的类别栏目的容器titleLayout = new LinearLayout(context);LinearLayout.LayoutParams params = new LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);titleLayout.setLayoutParams(params);titleLayout.setBackgroundResource(R.color.transparent);titleLayout.setOrientation(LinearLayout.HORIZONTAL);titleLayout.setPadding(leftRight, 0, leftRight, 0);titleListView = new ArrayList<TextView>();//创建顶部的栏目 （最新，最热）for(int i=0;i<typeList.size();i++){TextView text = new TextView(context);LinearLayout.LayoutParams tpParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);text.setLayoutParams(tpParams);text.setBackgroundResource(R.drawable.bg_btn_type_normal);text.setPadding(leftRight, topBottom, leftRight, topBottom);text.setGravity(Gravity.CENTER);text.setTextSize(16);text.setText(typeList.get(i).getText());text.setTag(typeList.get(i));text.setOnClickListener(new myTypeOnClickListener());titleLayout.addView(text);titleListView.add(text);}//创建横向列表mHorizontalScrollView = new HorizontalScrollView(context);FrameLayout.LayoutParams hparams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);mHorizontalScrollView.setLayoutParams(hparams);mHorizontalScrollView.setPadding(leftRight, topBottom, leftRight, topBottom);mHorizontalScrollView.setHorizontalFadingEdgeEnabled(true);mHorizontalScrollView.setFadingEdgeLength(10);mHorizontalScrollView.setHorizontalScrollBarEnabled(false);//不需要滚动条，设置滚动条不可用//横向scrool只能包含一个子元素mlayout = new LinearLayout(context);LinearLayout.LayoutParams layparams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);mlayout.setLayoutParams(layparams);mlayout.setOrientation(LinearLayout.HORIZONTAL);mlayout.setBackgroundResource(R.color.transparent);childTitleListView = new ArrayList<TextView>();for(int i=0;i<childTypeList.size();i++){TextView text = new TextView(context);LinearLayout.LayoutParams tpParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);text.setLayoutParams(tpParams);text.setBackgroundResource(R.drawable.bg_btn_type_normal);text.setPadding(leftRight, topBottom, leftRight, topBottom);text.setGravity(Gravity.CENTER);text.setTextSize(16);text.setText(childTypeList.get(i).getText());text.setTag(childTypeList.get(i));text.setOnClickListener(new myChildItemClickListener());mlayout.addView(text);childTitleListView.add(text);}mHorizontalScrollView.addView(mlayout);addView(titleLayout, 0);addView(mHorizontalScrollView, 1);//默认选择第一个视图if(titleListView.size()>0)titleListView.get(0).setBackgroundResource(R.drawable.bg_btn_type_check);if(titleListView.size() >0)childTitleListView.get(0).setBackgroundResource(R.drawable.bg_btn_type_check);}/** * 大栏目的onClickListener事件 * @author yantao * */private class myTypeOnClickListener implements OnClickListener{@Overridepublic void onClick(View view) {TypeBean bean = (TypeBean) view.getTag();flag = true;//只要点了父类，就将锁关闭if(bean.getId() == typeId){//避免多次点击当前栏目 return;}typeId = bean.getId();TextView currentView = (TextView) view;for(int i=0;i<titleListView.size();i++){//首先遍历所有的大类型的view，设置背景效果为没有选中的效果TextView mytxt = titleListView.get(i);mytxt.setBackgroundResource(R.drawable.bg_btn_type_normal);}currentView.setBackgroundResource(R.drawable.bg_btn_type_check);//把当前点击的控件设置为选中效果if(typeItemClickListener != null){// 这里是想做一个拓展，使子栏目也会跟着变化，子栏目变化，同样外面的listview中的数据也要一起变化，//要告诉外界的几个变量分别为： 当前item的ID，当前的view，和当前子类型选中的id,当然typeItemClickListener.OnTypeItemClick(bean.getId(),currentView,childId);}}}/** * 子类型的onClickListener * @author yantao * */private class myChildItemClickListener implements OnClickListener{@Overridepublic void onClick(View view) {TypeBean bean = (TypeBean) view.getTag();if(childId == bean.getId() && !flag){//避免多次点击当前栏目，return;}flag = false;//只要点了自己，就将锁锁上childId = bean.getId();for(int i=0;i<childTitleListView.size();i++){TextView text = childTitleListView.get(i);text.setBackgroundResource(R.drawable.bg_btn_type_normal);}view.setBackgroundResource(R.drawable.bg_btn_type_check);if(typeItemClickListener != null )typeItemClickListener.onRefrashListData(typeId, childId);}}/** * 设置当前view的item点击监听 * @param myTypeItemClickListener */public void setOnTypeItemClickListener(onItemClickListener myTypeItemClickListener){this.typeItemClickListener = myTypeItemClickListener;}/** * 是否需要更新子类视图，默认为不需要 * @param enable */public void setUpdateChildEnable(boolean enable){this.updateChildEnable = enable;}/** * 设置子类视图的菜单项 * @param childTypeList 子类视图的数据源 * @return 修改子类视图是否完成，如果设置不需要修改子类视图，则返回false    默认返回false * 如要修改子类视图，需调用setUpdateChildEnable方法设置标记为true */public boolean RefrashChildTypeView(List<TypeBean> childTypeList){if(!updateChildEnable){return updateChildEnable;//throw new Exception("不需要修改子类视图！", new Throwable("不需要修改子类视图"));}this.childTypeList = childTypeList;if(mlayout != null && mlayout.getChildCount()>0)//移除横向列表中的所有的数据mlayout.removeAllViews();if(childTitleListView == null){childTitleListView = new ArrayList<TextView>();}else{childTitleListView.clear();}TextView currentView = null;for(int i=0;i<childTypeList.size();i++){TextView text = new TextView(mContext);LinearLayout.LayoutParams tpParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);text.setLayoutParams(tpParams);text.setBackgroundResource(R.drawable.bg_btn_type_normal);text.setPadding(leftRight, topBottom, leftRight, topBottom);text.setGravity(Gravity.CENTER);text.setTextSize(16);text.setText(childTypeList.get(i).getText());text.setTag(childTypeList.get(i));text.setOnClickListener(new myChildItemClickListener());mlayout.addView(text);childTitleListView.add(text);if(childTypeList.get(i).getId() == childId){currentView = text;}}if(currentView != null){currentView.performClick();}return true;}public static class TypeBean{public TypeBean() {}public TypeBean(int id,int index,String text) {this.id = id;this.index = index;this.text = text;}/** * 用于标示该item项 */private int id;/** * 位置索引 */private int index;/** * 显示的item的文字 */private String text;public int getId() {return id;}public void setId(int id) {this.id = id;}public int getIndex() {return index;}public String getText() {return text;}public void setText(String text) {this.text = text;}}public interface onItemClickListener {/** * 大类型的单击事件 * @param position 大类型视图的id * @param view 当前视图 * @param childPosition 子视图的位置 */public void OnTypeItemClick(int position,TextView view,int childPosition);/** * 刷新数据的方法 * @param mdataList */void onRefrashListData(int typeId,int childId);}}

视图都是用代码完成的，基本上不需要xml，当然，这里面有两个点击之后的效果和一些颜色代码用到了XML文件，一并奉上。

bg_btn_type_check.xml

<?xml version="1.0" encoding="utf-8"?><shape  xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@color/transparent" />    <!-- #578fbe -->    <stroke        android:width="1px"        android:color="@color/greener" /></shape >

bg_btn_type_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape  xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@color/transparent" />    <!-- #578fbe -->    <stroke        android:width="1px"        android:color="@color/transparent" /></shape >

R.color.transparent    透明背景色

<color name="transparent">#00000000</color>

@color/white   

    <color name="white">#ffffff</color>

 

@color/light_gray   

    <color name="light_gray">#E3E0D9</color>

调用的代码：

public class MineActivity extends CommonActivity {TextView text_media;MyTypeView myTypeView;@SuppressWarnings("unchecked")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_mine);initTitle("我的",false);//text_media = (TextView)findViewById(R.id.play_media);myTypeView = (MyTypeView) findViewById(R.id.mine_mtypeview);//text_media.setOnClickListener(new OnClickListener() {//@Override//public void onClick(View v) {//Intent intent = new Intent();//intent.setClass(MineActivity.this, Type11Activity.class);//startActivity(intent);//}//});List<TypeBean> typeList = new ArrayList<MyTypeView.TypeBean>();List<TypeBean> childTypeList = new ArrayList<MyTypeView.TypeBean>();TypeBean type1 = new MyTypeView.TypeBean(0,0,"最新");TypeBean type2 = new MyTypeView.TypeBean(1,1,"最热");typeList.add(type1);typeList.add(type2);for(int i=0;i<10;i++){TypeBean mtypes = new MyTypeView.TypeBean(i,i,"菜单"+i);childTypeList.add(mtypes);}myTypeView.OnViewInit(MineActivity.this, typeList, childTypeList);myTypeView.setOnTypeItemClickListener(new onItemClickListener() {@Overridepublic void OnTypeItemClick(int position, TextView view,int childPosition) {String str =  view.getText().toString();List<TypeBean> childTypeDatas = new ArrayList<MyTypeView.TypeBean>();//Toast.makeText(MineActivity.this, str, 1000).show();for(int i=0;i<10;i++){TypeBean mtypes = new MyTypeView.TypeBean(i,i,str+i);childTypeDatas.add(mtypes);}boolean flag = myTypeView.RefrashChildTypeView(childTypeDatas);if(flag){}else{Toast.makeText(MineActivity.this, "不需要修改子类视图！", 1000).show();}}@Overridepublic void onRefrashListData(int typeId, int childId) {Toast.makeText(MineActivity.this, "大类型的id："+typeId+",子类型的ID："+childId, 1000).show();}});}}

调用界面的xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@color/light_gray"    android:orientation="vertical" >    <include         layout="@layout/title_bar"        /><!-- <TextView    android:id="@+id/play_media"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    android:text="播放视频" /> --><com.kindlion.media.view.MyTypeView    android:id="@+id/mine_mtypeview"    android:layout_marginTop="5dip"    android:paddingTop="3dip"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@color/white"/></LinearLayout>

以上的代码拷贝进去android开发工具中，改一下包名，别忘记了XML里面对应的包名也需要改，应该可以直接运行，懒得整理代码，就不上传源码和demo了！