AndroidUI之ViewPagerIndicator与tableLayout使用流程

• ViewPagerIndicator使用流程

• • 引入library库

  • 布局文件

    在布局文件中声明TabPageIndicator控件, 必须和ViewPager搭配使用
    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tpi_news_menu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_news_menu"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    

  • 初始化
    1. 和ViewPager关联起来, ViewPager页面发生变化时, 指针也会跟随变化

    
    mAdapter = new NewsMenuAdapter();
    mViewPager.setAdapter(mAdapter);//一定要先有adapter,否则报错
     mIndicator.setViewPager(mViewPager);
2. 在ViewPager的Adapter中,重写该方法:(以及instantiateItem和destroyItem)
  • 
    @Override
    public CharSequence getPageTitle(int position) {
        return mNewsTabDataList.get(position).title;
    }

@Override public Object instantiateItem(ViewGroup container, int position) {//初始化视图的操作   TextView textView = new TextView(MainActivity.this);   textView.setText(list.get(position));   textView.setTextSize(30);   textView.setGravity(Gravity.CENTER);   container.addView(textView);   return textView;

@Override public void destroyItem(ViewGroup container, int position, Object object) {   //super.destroyItem(container, position, object);   container.removeView((View) object);//禁用父类方法 否则只能最多三个 } //设置监听 tpi_news_menu.setOnPageChangeListener()...

• • 

3. 样式修改

参照Demo, 给Activity设置主题样式
  <activity
    android:name=".MainActivity"
    android:theme="@style/Theme.PageIndicatorDefaults" />

修改样式中的图片, 文字颜色等
<style name="Theme.PageIndicatorDefaults" parent="android:Theme">
    <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
    <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style><--设置colorPrimary,colorAccent等--->

//页签样式修改
<style name="Widget.TabPageIndicator" parent="Widget">
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/vpi__tab_indicator</item>//修改页签背景
    <item name="android:paddingLeft">22dip</item>
    <item name="android:paddingRight">22dip</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingBottom">12dp</item>
    <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@drawable/vpi__tab_text_color</item>//修改页签字体颜色
    <item name="android:maxLines">1</item>
</style>

vpi__tab_indicator.xml
将默认图片改为透明: @android:color/transparent
将选中图片改为自定义图片


---

TabLayout替换ViewPagerIndicator

TabLayout替换ViewPagerIndicator 参照文章： http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/ 1.build.gradle关联库，需要在联网的情况下做 compile 'com.android.support:design:22.2.1' 2.在布局文件中使用TabLayout,即把TabPagerIndicator替换成TabLayout <android.support.design.widget.TabLayout android:id="@+id/tabpage_indicator" android:layout_width="wrap_content" style="@style/MyCustomTabLayout" android:layout_height="wrap_content" android:layout_weight="1" /> 3.设置样式（不能没有样式）==>在布局中 style="@style/MyCustomTabLayout" <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabMaxWidth">@dimen/tab_max_width</item> <item name="tabMinWidth">72dp</item> <item name="tabIndicatorColor">#0000FF</item> <item name="tabIndicatorHeight">3dp</item> <item name="tabPaddingStart">8dp</item> <item name="tabPaddingEnd">8dp</item> <item name="tabBackground">@android:color/white</item> <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> <item name="tabSelectedTextColor">@android:color/holo_red_light</item> </style> <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">14sp</item> <item name="android:textColor">@android:color/black</item> <item name="textAllCaps">false</item> </style> 4.关联ViewPager //TabLayout关联ViewPager tabLayout.setupWithViewPager(vp_news_menu_detail); //一定要设置设置滚动模式 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 5.在适配器中重写getPageTitle方法 @Override public CharSequence getPageTitle(int position) { return children.get(position).getTitle(); } 6.自定义Tab的效果 6.1 设置Tab的效果步骤一，在适配器adapter中重写getTabView()方法=== getTabView需要自定义的时候使用 public View getTabView(int position){ View view = LayoutInflater.from(mActivity).inflate(R.layout.tab_item, null); TextView tv= (TextView) view.findViewById(R.id.textView); tv.setText(children.get(position).getTitle()); ImageView img = (ImageView) view.findViewById(R.id.imageView); img.setImageResource(R.drawable.dot_focus); return view; } 要写布局如下 tab_item ： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" /> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" /> </LinearLayout> 6.2在initData中调用 getTabView 方法 //自定义Table布局要结合适配器中的getTabView方法 for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(mAdapter.getTabView(i)); } 如果不调用就没有效果

---

ViewPagerIndicator的集成步骤(课堂) 1.下载和解压 下载地址： https://github.com/JakeWharton/ViewPagerIndicator 2.运行案例 3.当前项目关联库 4.写布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layoutwidth="fillparent" android:layoutheight="fillparent"> <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:background="@drawable/base_action_bar_bg" android:layout_height="wrap_content" android:layout_width="fill_parent" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> 5.使用 //实例化TabPageIndicator然后设置ViewPager与之关联 TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator); indicator.setViewPager(pager); //如果我们要对ViewPager设置监听，用indicator设置就行了 6.在适配器中多写 @Override public CharSequence getPageTitle(int position) { return children.get(position).getTitle(); } 7.设置样式，在工程的功能清单文件，对应的Activity配置样式 <activity android:name=".MainActivity" android:theme="@style/Theme.PageIndicatorDefaults"/> 8.修改样式 9.修改后的 @drawable/vpi_tabindicator <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states --> <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /> <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" /> <!-- Focused states --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /> <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" /> <!-- Pressed --> <!-- Non focused states --> <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" /> <item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" /> <!-- Focused states --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" /> <item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" /> 10.文字颜色 @drawable/vpitabtextcolorindicator <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states --> <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="#000000" /> <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:color="#ff0000" /> <!-- Focused states --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:color="#000000" /> <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:color="#ff0000" /> <!-- Pressed --> <!-- Non focused states --> <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:color="#000000" /> <item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:color="#ff0000" /> <!-- Focused states --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:color="#000000" /> <item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:color="#ff0000" /> </selector> 顶部新闻轮播图事件处理的原理 一.竖直方向滑动，不做处理 设置是否拦截事件为 getParent().requestDisallowInterceptTouchEvent(false); 二.水平方向滑动 1.当滑动到第一个页面，并且方向是从左到右的滑动 endX - startX > 0 那么方向就是：从左往右滑动 getParent().requestDisallowInterceptTouchEvent(false); 2.当滑动到最后一个页面的时候，并且方向是从右到左滑动 endX - startX < 0 那么方向就是：从右往左滑动 getParent().requestDisallowInterceptTouchEvent(false); 3.其他情况 getParent().requestDisallowInterceptTouchEvent(true);

onInterceptTouchEvent()的机制总结，基本的规则是： 1. down事件首先会传递到onInterceptTouchEvent()方法 2. 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return false，那么后续的move, up等事件将继续会先传递给该ViewGroup，之后才和down事件一样传递给最终的目标view的onTouchEvent()处理。 3. 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return true，那么后续的move, up等事件将不再传递给onInterceptTouchEvent()，而是和down事件一样传递给该ViewGroup的onTouchEvent()处理，注意，目标view将接收不到任何事件。 4. 如果最终需要处理事件的view的onTouchEvent()返回了false，那么该事件将被传递至其上一层次的view的onTouchEvent()处理。 5. 如果最终需要处理事件的view 的onTouchEvent()返回了true，那么后续事件将可以继续传递给该view的onTouchEvent()处理。