Android開発メモ(SmartNews風のタブを作る)

pc

SmartNews風のタブを作る

これはみなさんやりたいみたいですね。

あのタブを作るにはまず角丸なボタン?を作らなければいけません。

そのために

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 背景色 -->
    <solid android:color="#ffffff" />

    <!-- 角丸 (10dpで設定) -->
    <corners android:radius="10dp" />

</shape>

こんな感じで作ってあげれば角丸が出来ます。

ただ、SmartNewsって色が一つ毎に違いますよね。

そうなると固定レイアウトでは。。

もちろん数の分だけdrawableを用意してもいいのですが

それではスマートじゃないです。

配列で使う色を用意しておいて

GradientDrawable drawable = new GradientDrawable();
drawable.setStroke(3, Color.parseColor(colors[setColorNum]));
drawable.setCornerRadius(10);
drawable.setColor(Color.parseColor(colors[setColorNum]));

こんな感じにGradientDrawableでバックグラウンドにセットしてあげればいい感じにできます!

後は、複雑すぎていつもわからなくなってしまうタブレイアウトです。

これは是非ともメモしておきたいと思いました。

<!-- tab部分 -->
<include layout="@layout/tab_track" />

<View
	android:id="@+id/selectLine"
	android:layout_marginTop="-4dp"
	android:layout_width="match_parent"
	android:layout_height="3dp"
	android:layout_gravity="bottom" />

<android.support.v4.view.ViewPager
	android:id="@+id/viewPager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@android:color/white" />

レイアウトとしてはこれだけです。

今はTabHostという便利なものがあるのですね。。

// Viewを取得
mTrackScroller = (HorizontalScrollView) findViewById(R.id.track_scroller);
mTrack = (ViewGroup) findViewById(R.id.track);
mIndicator = findViewById(R.id.indicator);

// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new MyPagerAdapter(this));

mViewPager.setOnPageChangeListener(new PageChangeListener());

後はこんな感じにviewpagerにセットしてあげるだけです。

また、この後タブを生成するのでループ処理をかけて

その中で先ほどのタブの表示部分の処理などを行います。

 

個人的に一番つまったのがPagerAdapterの部分です。

うまく自分の居場所がわからない。。

「ViewPager.OnPageChangeListener」をimplementしたリスナーを用意して

@Override
public void onPageScrollStateChanged(int state) {
	mScrollingState = state;
	if (state == ViewPager.SCROLL_STATE_DRAGGING) {
      mViewPager.getCurrentItem();
	}
}

こいつで判断するのが一番わかりやすかったです。

タブの状態に関して非常にわかりやすく書いていた方がいたのでメモです。

onPageScrollStateChanged() では、スクロールの状態を取得することができます。

  • SCROLL_STATE_IDLE(0)
  • SCROLL_STATE_DRAGGING(1)
  • SCROLL_STATE_SETTLING(2)

実際に動かしてみると、引数のstateはそれぞれ以下のタイミングで値が取得できました。

  • ViewPagerの位置が落ち着いた状態が0
  • ViewPagerがドラッグされていると1
  • ViewPagerが最終的な位置に落ち着く前が2

これを参考に必要なタイミングで処理できればばっちりですね。

コメント

タイトルとURLをコピーしました