AndroidUI之ViewPagerIndicator与tableLayout使用流程

「爱情、让人受尽委屈。」 2022-07-21 11:21 142阅读 0赞

*  **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;     }`

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> 
    <div>
      @Override 
    </div> 
    <div>
      public Object 
     <span style="color:rgb(250,122,0)"><strong>instantiateItem</strong></span>(ViewGroup container, int position) {//初始化视图的操作 
    </div> 
    <div>
      &nbsp; TextView textView = new TextView(MainActivity.this); 
    </div> 
    <div>
      &nbsp; textView.setText(list.get(position)); 
    </div> 
    <div>
      &nbsp; textView.setTextSize(30); 
    </div> 
    <div>
      &nbsp; textView.setGravity(Gravity.CENTER); 
    </div> 
    <div>
      &nbsp; container.addView(textView); 
    </div> 
    <div>
      &nbsp; return textView; 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:100%"> 
    <div>
      @Override 
    </div> 
    <div>
      public void 
     <span style="color:rgb(222,87,0)"><strong>destroyItem</strong></span>(ViewGroup container, int position, Object object) { 
    </div> 
    <div>
      &nbsp; //super.destroyItem(container, position, object); 
    </div> 
    <div>
      &nbsp; 
     <span style="color:rgb(250,122,0)"><strong>container.removeView((View) object);//禁用父类方法 否则只能最多三个</strong></span> 
    </div> 
    <div>
      } 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      //设置监听 
    </div> 
    <div>
      tpi_news_menu.setOnPageChangeListener()... 
    </div> 
    <div> 
     <br> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

*   *  `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 将选中图片改为自定义图片`

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

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> <span style="color:rgb(255,0,0)"><strong><span style="font-size:24px"><span style="font-family:Helvetica,arial,freesans,clean,sans-serif">TabLayout替换ViewPagerIndicator</span></span></strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:100%"> 
    <div> 
     <h1 style=""><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">TabLayout替换ViewPagerIndicator</span></h1> 
     <p style="margin-top:10px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">参照文章： http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/</span></p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">1.build.gradle关联库，需要在联网的情况下做</span></p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <strong><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">compile 'com.android.support:design:22.2.1'</span></strong></p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">2.在布局文件中使用TabLayout,即把<strong>TabPagerIndicator替换成TabLayout</strong></span></p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> &lt;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" /&gt; </code></span></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">3.设置样式（不能没有样式）==&gt;在布局中</span></p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(28,51,135)"><strong><span style="font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">style="@style/MyCustomTabLayout"</span></strong></span></p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> &lt;style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"&gt; &lt;item name="tabMaxWidth"&gt;@dimen/tab_max_width&lt;/item&gt; &lt;item name="tabMinWidth"&gt;72dp&lt;/item&gt; &lt;item name="tabIndicatorColor"&gt;#0000FF&lt;/item&gt; &lt;item name="tabIndicatorHeight"&gt;3dp&lt;/item&gt; &lt;item name="tabPaddingStart"&gt;8dp&lt;/item&gt; &lt;item name="tabPaddingEnd"&gt;8dp&lt;/item&gt; &lt;item name="tabBackground"&gt;@android:color/white&lt;/item&gt; &lt;item name="tabTextAppearance"&gt;@style/MyCustomTabTextAppearance&lt;/item&gt; &lt;item name="tabSelectedTextColor"&gt;@android:color/holo_red_light&lt;/item&gt; &lt;/style&gt; &lt;style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"&gt; &lt;item name="android:textSize"&gt;14sp&lt;/item&gt; &lt;item name="android:textColor"&gt;@android:color/black&lt;/item&gt; &lt;item name="textAllCaps"&gt;false&lt;/item&gt; &lt;/style&gt; </code></span></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">4.关联ViewPager</span></p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif"><code style="margin:0px; padding:0px; border:none; font-family:Consolas,'Liberation Mono',Courier,monospace; background-color:transparent"><span style="font-size:12px"> //TabLayout关联ViewPager </span><span style="font-size:15px"><strong>tabLayout.setupWithViewPager(vp_news_menu_detail);</strong></span><span style="font-size:12px"> //一定要设置设置滚动模式 <span style="color:rgb(45,79,201)"><span style="font-size:16px">tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);</span></span></span></code></span></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">5.在适配器中<span style="color:rgb(45,79,201)"><strong>重写getPageTitle方法</strong></span></span></p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> @Override public CharSequence getPageTitle(int position) { return children.get(position).getTitle(); } </code></span></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">6.自定义Tab的效果</span></p> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <div style="margin-top:15px; margin-right:0px; margin-bottom:15px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> 
      <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">6.1 设置Tab的效果步骤一，<span style="color:rgb(28,51,135)"><strong>在适配器adapter中重写getTabView()方法===</strong></span></span> 
      <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-style:initial; border-color:initial; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; background-color:transparent; border-width:initial; border-color:initial; border-width:initial; border-color:initial"><strong><span style="color:rgb(250,122,0)">getTabView需要自定义的时候使用</span></strong></code></span> 
     </div> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> public View <strong><span style="color:rgb(250,122,0)">getTabView</span></strong>(int position){ View view = LayoutInflater.from(mActivity).inflate(R.layout.<span style="color:rgb(54,101,238)">tab_item</span>, 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; } </code></span></pre> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <div style="margin-top:15px; margin-right:0px; margin-bottom:15px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> 
      <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">要写布局如下</span> 
      <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-style:initial; border-color:initial; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; white-space:pre; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none; background-color:transparent; border-width:initial; border-color:initial; border-width:initial; border-color:initial"><span style="color:rgb(54,101,238)">tab_item</span></code></span> 
      <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"> ：</span> 
     </div> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;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"&gt; &lt;TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3dp" /&gt; &lt;ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" /&gt; &lt;/LinearLayout&gt; </code></span></pre> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div> 
     <div style="margin-top:15px; margin-right:0px; margin-bottom:15px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> 
      <div> 
       <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">6.2<span style="font-size:16px"><span style="color:rgb(250,122,0)"><strong>在initData中调用 getTabView 方法</strong></span></span></span> 
      </div> 
     </div> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> <span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">//自定义Table布局要结合适配器中的getTabView方法</span></p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><span style="color:rgb(51,51,51); font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent"> for (int i = 0; i &lt; tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(mAdapter.getTabView(i)); } </code></span></pre> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div style="margin-top:15px; margin-right:0px; margin-bottom:15px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> 
     <span style="color:rgb(227,0,0)"><span style="font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px">如果不调用就没有效果</span></span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table style=""> 
 <tbody> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:99.88109393579072%"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:100%"> 
    <div style="margin:0px auto; padding:20px; border:0px; font-family:Helvetica,arial,freesans,clean,sans-serif; font-size:14px; color:rgb(51,51,51)"> 
     <div style="">
       ViewPagerIndicator的集成步骤(课堂) 
     </div> 
     <p style="margin-top:10px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 1.下载和解压 下载地址： https://github.com/JakeWharton/ViewPagerIndicator</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 2.运行案例</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 3.当前项目关联库</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 4.写布局文件 &lt;LinearLayout<br> xmlns:android="http://schemas.android.com/apk/res/android"<br> android:orientation="vertical"<br> android:layout<span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">width="fill</span>parent"<br> android:layout<span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">height="fill</span>parent"&gt;</p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent">    &lt;com.viewpagerindicator.TabPageIndicator  
        android:id="@+id/indicator"  
        android:background="@drawable/base_action_bar_bg"  
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent"  
        /&gt;  
    &lt;android.support.v4.view.ViewPager  
        android:id="@+id/pager"  
        android:layout_width="fill_parent"  
        android:layout_height="0dp"  
        android:layout_weight="1"  
        /&gt;

&lt;/LinearLayout&gt;  
</code></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 5.使用</p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent">  //实例化TabPageIndicator然后设置ViewPager与之关联  
    TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);

indicator.setViewPager(pager);

//如果我们要对ViewPager设置监听，用indicator设置就行了  
</code></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 6.在适配器中多写</p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent">  @Override
    public CharSequence getPageTitle(int position) {
        return  children.get(position).getTitle();
  }
</code></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 7.设置样式，在工程的功能清单文件，对应的Activity配置样式 &lt;activity android:name=".MainActivity" android:theme="@style/Theme.PageIndicatorDefaults"/&gt;</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 8.修改样式</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 9.修改后的&nbsp;@drawable/vpi_<span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">tab</span>indicator</p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent">&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    &lt;!-- Non focused states --&gt;
    &lt;item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /&gt;
    &lt;item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" /&gt;

&lt;!-- Focused states --&gt;
    &lt;item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" /&gt;
    &lt;item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" /&gt;

&lt;!-- Pressed --&gt;
&lt;!--    Non focused states --&gt;
&lt;item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" /&gt;
&lt;item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" /&gt;

&lt;!--    Focused states --&gt;
&lt;item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" /&gt;
&lt;item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" /&gt;
</code></pre> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> </p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 10.文字颜色</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> @drawable/vpi<span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"><span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial">tab</span>textcolor</span>indicator</p> 
     <pre style="margin-top:15px; margin-bottom:15px; padding:6px 10px; border:1px solid rgb(204,204,204); font-size:13px; font-family:Consolas,'Liberation Mono',Courier,monospace; overflow:auto; background-color:rgb(248,248,248)"><code style="margin:0px; padding:0px; font-size:12px; font-family:Consolas,'Liberation Mono',Courier,monospace; border:none; background-color:transparent">&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    &lt;!-- Non focused states --&gt;
    &lt;item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="#000000" /&gt;
    &lt;item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:color="#ff0000" /&gt;

&lt;!-- Focused states --&gt;
    &lt;item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:color="#000000" /&gt;
    &lt;item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:color="#ff0000" /&gt;

&lt;!-- Pressed --&gt;
    &lt;!--    Non focused states --&gt;
    &lt;item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:color="#000000" /&gt;
    &lt;item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:color="#ff0000" /&gt;

&lt;!--    Focused states --&gt;
    &lt;item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:color="#000000" /&gt;
    &lt;item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:color="#ff0000" /&gt;
&lt;/selector&gt;
</code></pre> 
     <h1 style="">顶部新闻轮播图事件处理的原理</h1> 
     <p style="margin-top:10px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 一.竖直方向滑动，不做处理 设置是否拦截事件为 getParent().requestDisallowInterceptTouchEvent(false);</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 二.水平方向滑动 1.当滑动到第一个页面，并且方向是从左到右的滑动 endX - startX &gt; 0 那么方向就是：从左往右滑动 getParent().requestDisallowInterceptTouchEvent(false);</p> 
     <p style="margin-top:15px; margin-bottom:15px; padding-top:0px; padding-bottom:0px; border:0px"> 2.当滑动到最后一个页面的时候，并且方向是从右到左滑动 endX - startX &lt; 0 那么方向就是：从右往左滑动 getParent().requestDisallowInterceptTouchEvent(false);</p> 
     <div> 
      <br> 
     </div> 
     <div style="margin-top:15px; margin-right:0px; margin-bottom:0px!important; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> 
      <div>
        3.其他情况 getParent().requestDisallowInterceptTouchEvent(true); 
      </div> 
      <div> 
       <br> 
      </div> 
     </div> 
    </div> </td> 
  </tr> 
  <tr> 
   <td style="border-style:solid; border-width:1px; border-color:rgb(211,211,211); padding:10px; margin:0px; width:100%"> 
    <div> 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      onInterceptTouchEvent()的机制总结，基本的规则是： 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      1. down事件首先会传递到onInterceptTouchEvent()方法 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      2. 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return false，那么后续的move, up等事件将继续会先传递给该ViewGroup，之后才和down事件一样传递给最终的目标view的onTouchEvent()处理。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      3. 如果该ViewGroup的onInterceptTouchEvent()在接收到down事件处理完成之后return true，那么后续的move, up等事件将不再传递给onInterceptTouchEvent()，而是和down事件一样传递给该ViewGroup的onTouchEvent()处理，注意，目标view将接收不到任何事件。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      4. 如果最终需要处理事件的view的onTouchEvent()返回了false，那么该事件将被传递至其上一层次的view的onTouchEvent()处理。 
    </div> 
    <div> 
     <br> 
    </div> 
    <div>
      5. 如果最终需要处理事件的view 的onTouchEvent()返回了true，那么后续事件将可以继续传递给该view的onTouchEvent()处理。 
    </div> </td> 
  </tr> 
 </tbody> 
</table>