Android开源框架ViewPagerIndicator的基本使用

xiaoxiao2021-02-28  5

转载本博客请注明出处:点击打开链接    http://blog.csdn.net/qq_32059827/article/details/52495647

很多新闻资讯类的app都有一些共性,那就是有一行页签,然后点击页签的内容后,会跳转到对应的页面。有很多此类app都是用到了ViewPagerIndicator这个开源框架。此篇博客就对这个框架的使用做一个笔记。后续随着在开发中不同的额使用场景,也会增加此博客的内容。

今天就先对他的使用方式,做一个介绍,完成一个小demo

首先,写一个布局。这个布局很简单,如果使用到,直接复制再根据实际需求稍作修改即可:

[html]  view plain  copy <LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"      android:layout_width="fill_parent"      android:layout_height="fill_parent">        <com.viewpagerindicator.TabPageIndicator          android:id="@+id/indicator"          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>   接着就是主活动中的代码了:

[html]  view plain  copy package com.itydl.demo;    import android.app.Activity;  import android.graphics.Color;  import android.os.Bundle;  import android.support.v4.view.PagerAdapter;  import android.support.v4.view.ViewPager;  import android.view.Gravity;  import android.view.View;  import android.view.ViewGroup;  import android.widget.TextView;    import com.viewpagerindicator.TabPageIndicator;    public class MainActivity extends Activity {            //定义一串数据源。这里是定义死的,当然大部分都是来源于网络解析的数据       private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres","Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" };        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          //固定使用布局          setContentView(R.layout.activity_main);          //获取实例          ViewPager pager = (ViewPager)findViewById(R.id.pager);                    //设置viewpage的适配器          MyAdapter adapter = new MyAdapter();          pager.setAdapter(adapter);            //把viewpage和TabPageIndicator关联          TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);          indicator.setViewPager(pager);                }            private class MyAdapter extends PagerAdapter{            @Override          public int getCount() {              // TODO Auto-generated method stub              return CONTENT.length;//告诉viewpage,我有多少条数据,要加载          }            @Override          public boolean isViewFromObject(View arg0, Object arg1) {              // TODO Auto-generated method stub              return arg0 == arg1;//官方推荐写法          }                    /**           * 页签显示数据的方法           */          @Override          public CharSequence getPageTitle(int position) {              return CONTENT[position];          }            @Override          public void destroyItem(ViewGroup container, int position, Object object) {              // TODO Auto-generated method stub              container.removeView((View) object);          }            @Override          public Object instantiateItem(ViewGroup container, int position) {                //先使每页page上显示text文本              // 本page要展示的内容。替换掉Fragmenlayout那张白纸。 改变子类自己的界面数据与样式。暂时先用textview代表整块view              TextView textView = new TextView(MainActivity.this);              textView.setText(CONTENT[position]);//为每一页加载的page设置显示的内容              textView.setTextSize(25);              textView.setGravity(Gravity.CENTER);              textView.setTextColor(Color.GREEN);                        //别忘记把view添加到page里面              container.addView(textView);              return textView;            }        }  }   可以看到,也是so easy嘛。可以直接运行啦,看一下效果图:

我们发现,的确奇丑无比。接下来就让他靓起来!那就要去配置一下样式了——

去开源框架提供的demo类中的配置文件,找到如下代码:

[html]  view plain  copy <activity             android:name=".SampleTabsDefault"             android:label="Tabs/Default"             android:theme="@style/Theme.PageIndicatorDefaults">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />             </intent-filter>         </activity>   发现,它有一个样式 android:theme="@style/Theme.PageIndicatorDefaults"

那就把这个样式,复制到自己的activity的配置文件中来。好了,咱就使用系统自带的样式吧,运行看一看结果:

(*@ο@*) 哇~感觉好绚丽了!!什么?还是不满足?想定义自己喜欢的样式?没问题——

接下来就修改成自己喜欢的样式:

对自带的样式做修改:

style中:

[html]  view plain  copy <style name="Theme.PageIndicatorDefaults" parent="android:Theme">                   <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>      </style>        <style name="Widget">      </style>        <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">14sp</item>          <item name="android:textColor">@color/vpi__dark_theme</item>          <item name="android:maxLines">1</item>      </style>            <style name="TextAppearance.TabPageIndicator" parent="Widget">          <item name="android:textStyle">bold</item>         <!--  <item name="android:textColor">@color/vpi__dark_theme</item> -->      </style>   drawable文件里的vpi__tab_indicator文件:

[html]  view plain  copy <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" />  </selector>   color里面的vpi__dark_theme

[html]  view plain  copy <selector xmlns:android="http://schemas.android.com/apk/res/android">        <item android:state_enabled="false" android:color="#000000"/>      <item android:state_window_focused="false" android:color="#000000"/>      <item android:state_pressed="true" android:color="#ff0000"/>      <item android:state_selected="true" android:color="#ff0000"/>      <!-- item android:state_activated="true" android:color="@color/vpi__bright_foreground_holo_dark"/ -->      <item android:color="#000000"/> <!-- not selected -->    </selector>   再运行一下:

这样看起来,就比较清爽了。如果想定义自己的样式,继续摸索改进就好了。

转载请注明原文地址: https://www.6miu.com/read-2399975.html

最新回复(0)