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

2023-01-28 14:46:15

转载请标明出处：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

码农公寓

一 新建Adapter

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

相关文章

一新建Adapter

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