Android组合控件（无限轮播图）

android 自定义控件

是的，真的是自定义控件。

相对于自定义控件的控件是什么呢？当然是原生的控件啦！

比如说：

1、Button 、TextView 、ImageView 、EditText等（view）。

2、LinearLayout   RelativeLayout   FrameLayout等（viewGroup）。

好理解吗？后面会解释的哦！

View和ViewGroup的关系

继承关系：

首先所有的控件继承于View，包括ViewGroup也是！所以：

哎呀，画了贼久，嘻嘻！话不多说，看图就OK了！当然，上面这个图是不够完整的，意思意思一下就好了，嘻嘻！是吧！

还画少了一条线，哈哈！太粗心咯！这上面这个是继承关系！

组合（嵌套）关系：

除了上面的继承关系，我们都知道，一个LinearLayout里面可以嵌套LinearLayout或者其他的控件，从这种关系里头，我们可以发现，这种嵌套是一种递归的关系，直到什么时候呢，哈哈！直到控件是一个非ViewGroup为止，也就是当前控件不能容纳控件为止。那什么控件不能容纳控件呢？比如说：Button ImageView TextView等等。也就是非ViewGroup的子类控件，嘻嘻！

再画一个图片吧：

看明白了吗？就这么一个轮回，嘻嘻。不是六世，是根据需求而定，嗯。好的！

对于Activity來说，是怎么样的结构呢？其实它是一个窗体Window---->PhoneWindow----->DecorView（这个是ViewGroup）所以它可以包含子控件。

自定义View和自定义控件

在这里呢，我要跟大家解释一件事。我在小时候学习android的时候，真的没能分清自定义控件和自定义view的区别。现在呢，大概可以解释了：

自定义控件：也就是控件的组合使用，定义为一个新的控件

自定义view：也就是这个view之前是没有的。比如说，QQ聊天条目的横划删除，QQ的侧滑缩放这些都是。相对來说，什么是非自定义view呢？由前面的view结构，我们可以知道，ImageView，Button，TextView...这些都是android已经定义好的view。

ViewPager的组合例子：

ViewPager在绝大多数的App开发中，都使用到的。无论是图片的轮播，还是在一个Activity里的多个Fragment的切换。当然，这也是一个经典的例子。

这里呢，我就使用我们博客的几张滚动图片，在实际开发中，图片多数是从服务器中获取的，绝少数是写死的。

思路：

1、布局不说了吧，我后面直接上布局；

2、首先先实现viewpager的数据，设置适配器；

3、动态地添加点；

4、对viewpager进行监听，动态地切换红色的点。

---------------------------------------------------------------------------------------------------------------

布局如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="160dp"    tools:context=".MainActivity" >    <!-- 图片 -->    <android.support.v4.view.ViewPager        android:id="@+id/vp_pic"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <!-- 字体描述部分 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:background="#66000000"        android:gravity="center"        android:orientation="vertical"        android:padding="3dp" >        <TextView            android:id="@+id/tv_des"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="图片描述"            android:textColor="#ffffff" />        <!-- 圆点容器 -->        <LinearLayout            android:id="@+id/ll_point_container"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal" >            <!-- 动态的添加点 -->        </LinearLayout>    </LinearLayout></RelativeLayout>

JAVA代码：（有一个小Bug，我没fix）

public class MainActivity extends Activity {private ViewPager mViewPager;private TextView mDes;private LinearLayout mPointContainer;private int[] mDatas = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,R.drawable.pic4 };@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//initView();initDatas();initEvent();//}/** * 初始化UI */private void initView() {setContentView(R.layout.activity_main);//mPointContainer = (LinearLayout) this.findViewById(R.id.ll_point_container);mDes = (TextView) this.findViewById(R.id.tv_des);mViewPager = (ViewPager) this.findViewById(R.id.vp_pic);//}/** * 初始化数据 */private void initDatas() {// 设置适配器mViewPager.setAdapter(new MyAdapter());// 根据图片的张数來添加点的个数for (int i = 0; i < mDatas.length; i++) {// 如果不是第一个的话就添加一个leftMarginImageView iv = new ImageView(this);iv.setBackgroundResource(R.drawable.point_white);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(Dp2dx.dp2dx(this, 10), Dp2dx.dp2dx(this, 10));if (i != 0) {params.leftMargin = Dp2dx.dp2dx(this, 10);}iv.setLayoutParams(params);mPointContainer.addView(iv);}selectedPoint(0);}/** * 适配器 *  * @author Administrator *  */private class MyAdapter extends PagerAdapter {@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// 销毁container.removeView((View) object);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView iv = new ImageView(MainActivity.this);iv.setBackgroundResource(mDatas[position % mDatas.length]);container.addView(iv);return iv;}@Overridepublic int getCount() {if (mDatas != null && mDatas.length != 0) {return Integer.MAX_VALUE;// 返回最大值，用于无限循环}return 0;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}}private void initEvent() {// 默认选中第一个，也就是第0个mViewPager.setCurrentItem(Integer.MAX_VALUE / 2);// 对viewPager的监听viewPagerEvent();}private void viewPagerEvent() {// 对viewPager进行监听mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// 页面滑动时的监听，选中当前的颜色selectedPoint(arg0 % mDatas.length);// 修改描述信息，这里直接做演示的话就直接修改文字，在实际开发中，可以另外一个方法來控制描述mDes.setText("图片描述" + arg0 % mDatas.length);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}// 这个方法用于选中远点的颜色public void selectedPoint(int position) {// 遍历一次，除Position之外，设置成白色for (int i = 0; i < mDatas.length; i++) {ImageView point = (ImageView) mPointContainer.getChildAt(i);if (i != position) {// 设置成白色point.setBackgroundResource(R.drawable.point_white);} else {// 设置成红色point.setBackgroundResource(R.drawable.point_read);}}}}

另外还有一个小工具类：把dp转成px

package com.sunofbeaches.viewpagerdemo;import android.content.Context;public class Dp2dx {public static int dp2dx(Context context, int dp) {float density = context.getResources().getDisplayMetrics().density;int dx = (int) (dp * density + 0.5f);return dx;}}

完成的效果大概就这样子咯：gif，有点大，可能加载需要一点时间：

如果需要自动轮播的话，可以使用handler，或者使用线成池都可以解决的。这很简单，去尝试一下吧！