安卓TV开发（六） 移动智能终端UI之实现类似GridView的焦点控制FocusView框架

转载请标明出处：http://blog.csdn.net/sk719887916/article/details/40045089，作者：skay

前言

安卓TV开发（五） 移动智能终端UI之实现主流TV视频播放器UI结尾发现View还是存在缺陷，上文就发现，因为没有adapter，导致FoucusView的代码繁琐，并且也不符合

一个集合框架（listView,GridView）的开发习惯和实现逻辑。本篇会通过FcousView和Adapter结合，完成高效的UI框架，使得开发者自定义宽高，翻页动画，显示可见条数，

和子item布局。 想必大家对gridView已经熟悉的滚瓜烂熟了，用到类似集合的视图控件，我们就会想到适配器，首先就来定义一个适配器 FocusAdapter。其中的子ItemView随

我们自己定义，不但支持一张图片，而且支持复杂的view，包括文字和图片，或者安卓自带的更高级的控件充当子view

一 新建Adapter

<span style="font-family: Arial, Helvetica, sans-serif;">public class FocusAdapter extends BaseAdapter {</span>

	private List<TvModle> mLists;

	private Context mContext;

	public FocusAdapter(List<TvModle> mLists, Context mContext) {
		super();
		this.mLists = mLists;
		this.mContext = mContext;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mLists.size();
	}

	@Override
	public TvModle getItem(int position) {
		// TODO Auto-generated method stub
		return mLists.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return -1;
	}

	@SuppressLint("NewApi")
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		/*LayoutInflater mInflater = LayoutInflater.from(mContext);
		View view  = mInflater.inflate(
				R.layout.layout_focus_item,parent);
		ImageView mImageView = (ImageView) view.findViewById(R.id.photo);
		TextView mTextView = (TextView) view.findViewById(R.id.title);
		mImageView.setBackgroundResource(mLists.get(position).getImage());
		mTextView.setText(mLists.get(position).getName());*/
		return null;
	}

接下来为FocusView也需要setData和setAdapter方法 FocusView内部定义 FocusAdapter mAdapter为成员属性。

public FocusAdapter getAdapter() {
		return mAdapter;
	}

	public void setAdapter(FocusAdapter mAdapter) {
		this.mAdapter = mAdapter;}

通过代码发现如果只是单纯的为view设置Adatpter并没什么卵用，因为focusview不是真正的Listview,或者gridview，因此继续完善，处理adapter面的view和data,

二 view和dapter绑定

继续扩展代码。遍历适配器的数据然后去设置到view上，并且也要满足focusview的排列方式

public void setAdapter(FocusAdapter mAdapter) {
		this.mAdapter = mAdapter;

		 if (mAdapter == null ) {
	           return;
	        }

		 int row = 0, col = 0;
		 int rowspan = 1, colspan = 1 ;
		for (int i = 0; i < mAdapter.getCount(); i++) {

			View mView =  mAdapter.getView(i, null, null);

			LinearLayout  layout =  new LinearLayout(getContext())
			layout.setFocusable(true);
			layout.setFocusableInTouchMode(true);
			layout.setBackgroundResource(mAdapter.getItem(i).getImage());
			layout.setPadding(PADDING, PADDING, PADDING, PADDING);
			if (mView != null) {
				layout.addView(mView, FILL_FILL);
			}
			FocusItemModle<TvModle>  mItemModle = null;
			if (i < 15) {
			   if (i < 5) {
				   row = 0;
				   col = i;
				   colspan = 1;
				   rowspan = 2;
				   mItemModle = new FocusItemModle<TvModle>(layout,mAdapter.getItem(i), row,  rowspan,  col,
							 colspan);

			   } else if (5 <= i && i < 10) {
				   row = 2;
				   col = i-5 ;
				   colspan = 1;
				   rowspan = 2;
				   mItemModle = new FocusItemModle<TvModle>(layout ,mAdapter.getItem(i), row,  rowspan,  col,
							 colspan);
			   }
			   else {
				   row = 4;
				   col = i-10;
				   colspan = 1;
				   rowspan = 2;
				   mItemModle = new FocusItemModle<TvModle>(layout ,mAdapter.getItem(i), row,  rowspan,  col,
							 colspan);
			   }
			   addFocusItem(mItemModle);
			}
			else {

				if (i < 20) {
					   row = 0;
					   col = i-10;
					   colspan = 1;
					   rowspan = 2;
					   mItemModle = new FocusItemModle<TvModle>(layout,mAdapter.getItem(i), row,  rowspan,  col,
								 colspan);

				   } else if (20 <= i && i < 25) {
					   row = 2;
					   col = i-15 ;
					   colspan = 1;
					   rowspan = 2;
					   mItemModle = new FocusItemModle<TvModle>(layout ,mAdapter.getItem(i), row,  rowspan,  col,
								 colspan);
				   }
				   else {
					   row = 4;
					   col = i-20;
					   colspan = 1;
					   rowspan = 2;
					   mItemModle = new FocusItemModle<TvModle>(layout ,mAdapter.getItem(i), row,  rowspan,  col,
								 colspan);
				   }
				   addFocusItem(mItemModle);
			}

		}

三 activity中使用 FocusView焦点控件

通过以上代码focusview拥有了可支持设配器的功能，在activity中可以下使用，

               setContentView(R.layout.mian_tv_ui);
		FocusView view = (FocusView) findViewById(R.id.focus_ui);
		view.setOnItemClickListener(this);
		view.setBackgroundColor(Color.BLACK);
		view.setGap(5);
		view.setVisibleItems(6, 5);
		view.setOrientation(OrientationType.Horizontal);
		view.setAnimation(R.anim.scale_small, R.anim.scale_big);
		getData();
		FocusAdapter adapter = new FocusAdapter(mTvLists, getBaseContext());
		view.setAdapter(adapter);

可以看出可以给焦点视图设置背景，条目点击事件，设配器，可见行数和列数，设置方向，设置翻页动画，设置间距等，说到有朋友可能会问你只在代码里设置参数，怎么在xml里去设置参数呢，就是所谓的控件属性，是的，目前xml是暂时无法声明，但是此实现也非常容易，既然我们已经能在代码里控制此参数，那么xml里也不过如此，玩过自定义控件的朋友可能比我还熟练，之前实现UI的我也没重点说明view的生命周期，因为那东西没什么好说的，既然本篇用到自定义控件属性，那么下面简单介绍下自定义控件参数。

 四 自定义控件参数属性

1 在value文件夹新建 attrs.xml，

自定义需要的控件参数，下面我简单定义了可见行数和列数，背景颜色，条目间距和排列方向等，其他focusview用到的属性不再定义，因为本人更喜欢在代码定义参数，个人喜好问题。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="FocusView">
        <attr name="VisibleRow" format="integer"></attr>
        <attr name="VisibleCol" format="integer"></attr>
         <attr name="Gap" format="integer"></attr>
        <attr name="Oriental" >
            <enum name="Horizontal" value="1"></enum>
            <enum name="Vertical" value="0"></enum>
        </attr>
        <attr name="BackgroundColor" format="color"></attr>
    </declare-styleable>

</resources>

2  安卓控件属类型

看了安卓控件属性源码 简单介绍先几种定义类型

1.） reference：参考某一资源ID。

reference

2）. color：颜色值。 
color 
3）. boolean：布尔值。 
boolean
4）. dimension：尺寸值。 
dimension
5）. float：浮点值。 
float

6）. integer：整型值。 
integer

7）. string：字符串。 
string

8）. fraction：百分数。 
fraction
9）. enum：枚举值。 
orientation
以上9种都相对一样

<declare-styleable name = "名称">
<attr name = "参数" format="类型" />
<attr name = "参数" format="integer" />
</declare-styleable> 

10）. flag：位或运算。 
:比较特殊：
<declare-styleable name="名称"> 
<attr name="windowSoftInputMode"> 
<flag name = "stateUnspecified" value = "0" /> 
<flag name = "stateUnchanged" value = "1" /> 
<flag name = "stateHidden" value = "2" /> 
<flag name = "stateAlwaysHidden" value = "3" /> 
</attr> 
</declare-styleable>    3 自定义Foucsview中拿到参数并给FoucsView设置相应属性。

	public FocusView(Context context, AttributeSet attrs) {

		this(context, attrs, 0);
		TypedArray mta = context.obtainStyledAttributes(attrs,
				R.styleable.FocusView);
		mRowsCount = mta.getInt(R.styleable.FocusView_VisibleRow, mColWidth);
		mColsCount = mta.getInt(R.styleable.FocusView_VisibleCol, mColWidth);
		color = mta.getDrawable(R.styleable.FocusView_BackgroundColor);
		mGapHeight = mGapWidth = mta.getInt(R.styleable.FocusView_Gap, 0);

	}

取出参数集合和 拿到对应的属性， 我们无需设置，，因为在Frcusview进行onMeasuru会用到，因为这里我们已经让全局变量赋值了，

4 xml设置相关属性即可

最后就只需在xim设置参数即可  不要忘了必须要声明控件命名空间   xmlns:focusview="http://schemas.android.com/apk/res/com.lyk.tv_ui_demo"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:focusview="http://schemas.android.com/apk/res/com.lyk.tv_ui_demo"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.example.tv_ui_demo.TvVieww
        android:id="@+id/focus_ui"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="10dp"
        focusview:Gap="5"
        focusview:VisibleCol="5"
        focusview:VisibleRow="6" />

</LinearLayout>

到这里，所有关于智能设备的UI绘制技巧以及全部讲完了，回顾五篇文章，如果成为一个自己定义布局或者控件高手，我们不仅要掌握安卓view的生命周期，事件的机制，动画的类型，还要有java Swiing绘图功底,而且还要有一定的设计思想功底，这样自己写出的view才能让别人加以利用和扩展,总之学习是循环渐进，不断提高的。虽然本次Foucus能满足大部分非触摸屏设备上的UI需求，但是万变不离其宗，更多好的功能还需要朋友们自己挖掘和扩展。

转载请标明出处：http://blog.csdn.net/sk719887916，作者：skay

源码下载地址 ：https://github.com/NeglectedByBoss/FocusVIew