溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
之前用JakeWharton的開源框架ActionBarSherlock和ViewPager實(shí)現(xiàn)了對網(wǎng)易新聞客戶端Tab標(biāo)簽的功能，ActionBarSherlock是在3.0以下的機(jī)器支持ActionBar的功能，有興趣的可以看看開源框架ActionBarSherlock 和 ViewPager 仿網(wǎng)易新聞客戶端，今天用到的是JakeWharton的另一開源控件ViewPageIndicator，ViewPager想必大家都知道，Indicator指示器的意思，所以ViewPageIndicator就是ViewPager指示器咯，什么是ViewPager指示器呢？看了下面這副圖你就明白了
你看明白了沒？就是ViewPager的分頁指示器，比如很多應(yīng)用的指引界面，下面的小圓點(diǎn)，還有一些應(yīng)用上面的Tab等等，ViewPageIndicator都能很好的實(shí)現(xiàn)，今天就繼續(xù)帶大家來實(shí)現(xiàn)網(wǎng)易新聞的Tab功能
我們先得去Github上面下載這個(gè)庫，下載地址：https://github.com/JakeWharton/Android-ViewPagerIndicator，下載下來之后你可以運(yùn)行例子，來看看我們需要什么樣的效果，然后在此基礎(chǔ)上改成我們自己想要的效果
sample是提供給我們的例子，library是庫工程，我們需要將其作為我們自己項(xiàng)目的依賴庫，我們新建一個(gè)Android工程，將library導(dǎo)入工程我就不介紹了，比較簡單相信大家都會(huì)，不知道的可以看看我的這篇文章http://blog.csdn.net/xiaanming/article/details/9971721
注：如果你新建的項(xiàng)目libs目錄下面有android-support-v4.jar，你要將其刪除，因?yàn)?/strong>ViewPageIndicator里面有這個(gè)庫，我們項(xiàng)目中不允許兩個(gè)android-support-v4.jar，不刪除我們的項(xiàng)目不能編譯的
下面我們來介紹主要代碼的編寫了，先看布局文件，上面一個(gè)TabPageIndicator，下面一個(gè)ViewPager，還是很簡單的布局咯
[html] view plaincopyprint?
<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: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>
<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: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>
MainActivity的代碼
[java] view plaincopyprint?
package com.example.viewpageindicator;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;
import com.viewpagerindicator.TabPageIndicator;
public class MainActivity extends FragmentActivity {
/**
* Tab標(biāo)題
*/
private static final String[] TITLE = new String[] { "頭條", "×××", "另一面", "女人",
"財(cái)經(jīng)", "數(shù)碼", "情感", "科技" };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ViewPager的adapter
FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(adapter);
//實(shí)例化TabPageIndicator然后設(shè)置ViewPager與之關(guān)聯(lián)
TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
//如果我們要對ViewPager設(shè)置監(jiān)聽，用indicator設(shè)置就行了
indicator.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
/**
* ViewPager適配器
* @author len
*
*/
class TabPageIndicatorAdapter extends FragmentPagerAdapter {
public TabPageIndicatorAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
//新建一個(gè)Fragment來展示ViewPager item的內(nèi)容，并傳遞參數(shù)
Fragment fragment = new ItemFragment();
Bundle args = new Bundle();
args.putString("arg", TITLE[position]);
fragment.setArguments(args);
return fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return TITLE[position % TITLE.length];
}
@Override
public int getCount() {
return TITLE.length;
}
}
}
package com.example.viewpageindicator;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;
import com.viewpagerindicator.TabPageIndicator;
public class MainActivity extends FragmentActivity {
/**
* Tab標(biāo)題
*/
private static final String[] TITLE = new String[] { "頭條", "×××", "另一面", "女人",
"財(cái)經(jīng)", "數(shù)碼", "情感", "科技" };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//ViewPager的adapter
FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(adapter);
//實(shí)例化TabPageIndicator然后設(shè)置ViewPager與之關(guān)聯(lián)
TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
//如果我們要對ViewPager設(shè)置監(jiān)聽，用indicator設(shè)置就行了
indicator.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
/**
* ViewPager適配器
* @author len
*
*/
class TabPageIndicatorAdapter extends FragmentPagerAdapter {
public TabPageIndicatorAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
//新建一個(gè)Fragment來展示ViewPager item的內(nèi)容，并傳遞參數(shù)
Fragment fragment = new ItemFragment();
Bundle args = new Bundle();
args.putString("arg", TITLE[position]);
fragment.setArguments(args);
return fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return TITLE[position % TITLE.length];
}
@Override
public int getCount() {
return TITLE.length;
}
}
}我們先實(shí)例化ViewPager,然后實(shí)例化TabPageIndicator，并且要設(shè)置TabPageIndicator和ViewPager關(guān)聯(lián)，就是調(diào)用TabPageIndicator的setViewPager(ViewPager view)方法，這樣子我們就實(shí)現(xiàn)了點(diǎn)擊上面的Tab，下面的ViewPager切換，滑動(dòng)ViewPager上面的Tab跟著切換，ViewPager的每一個(gè)Item我們使用的是Fragment，使用Fragment可以使我們的布局更加靈活一點(diǎn)，所以建議大家多用用Fragment，你會(huì)發(fā)現(xiàn)他真的很好用，上面還有一點(diǎn)需要注意的地方，當(dāng)我們需要給ViewPager設(shè)置監(jiān)聽的時(shí)候，我們之前設(shè)置OnPageChangeListener直接用ViewPager.setOnPageChangeListener,而現(xiàn)在我們不能這樣子了，TabPageIndicator提供了設(shè)置OnPageChangeListener的方法，我們需要調(diào)用TabPageIndicator.setOnPageChangeListener來設(shè)置監(jiān)聽
ViewPager的item，也就是Fragment，我這里只用了一個(gè)TextView來顯示從MainActivity傳遞過來的Tab的標(biāo)題，只是為了模擬平常我們實(shí)際使用中，從Activity傳遞參數(shù)給Fragment，布局我就不貼了，代碼也比較簡單，直接看代碼吧
[java] view plaincopyprint?
package com.example.viewpageindicator;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class ItemFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View contextView = inflater.inflate(R.layout.fragment_item, container, false);
TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
//獲取Activity傳遞過來的參數(shù)
Bundle mBundle = getArguments();
String title = mBundle.getString("arg");
mTextView.setText(title);
return contextView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}
package com.example.viewpageindicator;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class ItemFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View contextView = inflater.inflate(R.layout.fragment_item, container, false);
TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
//獲取Activity傳遞過來的參數(shù)
Bundle mBundle = getArguments();
String title = mBundle.getString("arg");
mTextView.setText(title);
return contextView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}當(dāng)然通過上面幾步我們還不能對網(wǎng)易新聞的模仿，我們還必須簡單修改其樣式，有些東西我是直接從開源框架ActionBarSherlock 和 ViewPager 仿網(wǎng)易新聞客戶端拿出來的，不過這里的樣式修改比用ViewPageIndicator簡單多了，樣式如下
[html] view plaincopyprint?
<style name="StyledIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/tab_indicator</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textSize">14sp</item>
<item name="android:dividerPadding">8dp</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
<item name="android:textColor">@drawable/selector_tabtext</item>
</style>
<style name="StyledIndicators" parent="@android:style/Theme.Light"> <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item> </style> <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator"> <item name="android:background">@drawable/tab_indicator</item> <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item> <item name="android:textSize">14sp</item> <item name="android:dividerPadding">8dp</item> <item name="android:showDividers">middle</item> <item name="android:paddingLeft">10dp</item> <item name="android:paddingRight">10dp</item> <item name="android:fadingEdge">horizontal</item> <item name="android:fadingEdgeLength">8dp</item> </style> <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium"> <item name="android:typeface">monospace</item> <item name="android:textColor">@drawable/selector_tabtext</item> </style>
通過上面簡單的幾步我們就實(shí)現(xiàn)了對網(wǎng)易新聞的模仿，接下來我們運(yùn)行下項(xiàng)目看下效果
總結(jié)
用ViewPageIndicator實(shí)現(xiàn)這樣子的Tab標(biāo)簽很容易，而且ViewPageIndicator里面還有各種的指示器，相對于用ActionBarSherlock來實(shí)現(xiàn)，ViewPageIndicator更加靈活，而且修改ActionBarSherlock的樣式比較復(fù)雜，如果你的項(xiàng)目中有用到ActionBarSherlock這個(gè)庫，你可以使用來實(shí)現(xiàn)Tab分頁，如果Tab上面還加導(dǎo)航條，ActionBarSherlock只能使用ActionBar來實(shí)現(xiàn)咯，而使用ViewPageIndicator我們可以更加靈活的使用自己的布局，我們我還是推薦使用ViewPageIndicator，這只是我的個(gè)人觀點(diǎn)
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
