ViewPage+Fragment+indicator+Tabhost効果
14546 ワード
ダウンロード先:
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
まず効果を見てみましょう.
私の前の文章http://www.cnblogs.com/asijack/p/4239445.htmlもこのスライドの効果ですが、それは私が望んでいる効果ではありません.私が望んでいるのは、このスライドのときにカーソルがスライドに従う効果で、スライドが終わってから動くのではありません.
demoはlibraries:ListSamples-libraryを導入する必要があります
注意が必要なのはlibrariesとdemoのandroid-support-v 4です.jarの必要性は一致しています(不要な面倒を省くために、同じjarパッケージを推奨します)
コードもそれほど多くありません
まずレイアウトを見てみましょう
v 4インジケータ付き
これです.
ここにはカスタムインジケータがあります
com.viewpagerindicator.UnderlinePageIndicatorはlibrariesで実現されています.
MainActivityのコードも比較的簡単です
ここでインジケータのアニメーション効果、背景などを設定できます.xmlレイアウトで設定することもできます.
その同期カーソルの色はここにある
final int defaultSelectedColor = res.getColor(R.color.default_underline_indicator_selected_color);
このlibrariesでは、円、線、カスタムなど、カーソルスタイルの変更もサポートされています.
興味があれば、このソースコードを見てもいいです.
ダウンロード先:
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
まず効果を見てみましょう.
私の前の文章http://www.cnblogs.com/asijack/p/4239445.htmlもこのスライドの効果ですが、それは私が望んでいる効果ではありません.私が望んでいるのは、このスライドのときにカーソルがスライドに従う効果で、スライドが終わってから動くのではありません.
demoはlibraries:ListSamples-libraryを導入する必要があります
注意が必要なのはlibrariesとdemoのandroid-support-v 4です.jarの必要性は一致しています(不要な面倒を省くために、同じjarパッケージを推奨します)
コードもそれほど多くありません
まずレイアウトを見てみましょう
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_guid1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="fragment1"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_guid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="fragment2"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_guid3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="fragment3"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_guid4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="fragment4"
android:textSize="18sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.viewpagerindicator.UnderlinePageIndicator
android:id="@+id/indicator"
android:layout_height="5dp"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
</LinearLayout>
v 4インジケータ付き
<android.support.v4.view.PagerTabStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
これです.
ここにはカスタムインジケータがあります
com.viewpagerindicator.UnderlinePageIndicatorはlibrariesで実現されています.
MainActivityのコードも比較的簡単です
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// textview
initTextView();
mAdapter = new MyFragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
//
UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(mPager);
//
indicator.setFades(false);
}
private void initTextView() {
// fragment(view) textview
view1=(TextView) findViewById(R.id.tv_guid1);
view2=(TextView) findViewById(R.id.tv_guid2);
view3=(TextView) findViewById(R.id.tv_guid3);
view4=(TextView) findViewById(R.id.tv_guid4);
//
view1.setOnClickListener(new TxListener(0));
view2.setOnClickListener(new TxListener(1));
view3.setOnClickListener(new TxListener(2));
view4.setOnClickListener(new TxListener(3));
}
public class TxListener implements View.OnClickListener{
private int index=0;
public TxListener (int i){
index=i;
}
@Override
public void onClick(View view) {
mPager.setCurrentItem(index);
}
}
//
UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(mPager);
//
indicator.setFades(false);
ここでインジケータのアニメーション効果、背景などを設定できます.xmlレイアウトで設定することもできます.
その同期カーソルの色はここにある
final int defaultSelectedColor = res.getColor(R.color.default_underline_indicator_selected_color);
このlibrariesでは、円、線、カスタムなど、カーソルスタイルの変更もサポートされています.
興味があれば、このソースコードを見てもいいです.
ダウンロード先:
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo