Android TabLayoutが京東の詳細効果を実現しました。
Googleは2015年のIO大会で、より詳細なMaterial Design設計仕様を持ってきました。同時に、新たなAndroid Design Support Libraryをもたらしてくれました。このsupportライブラリでGoogleはより規範的なMDデザインスタイルのコントロールを提供してくれました。最も重要なのは、Android Design Support Libraryの互換性がより広く、Android 2.2に直接適合することができます。
この二日間は京東の詳しいページを真似して、上のTabを切り替えます。以前は自分でView pager+fragmentを書いていました。あるいはIndicatorの深さを注文して、TabLayoutを試してみたいです。すると、次の穴があります。
次は私の簡単な実現効果です。
参照ライブラリを追加
実現されたレイアウトを見てみましょう。
他の使い方はIndicatorの使い方と同じです。アダプターを設置して、データを通じてページのフィットを実現します。直接コード
Adapter
tabmodeは二つの属性値があります。
MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE:Scrllable tabs display a subset of tabs at any given moment、and can contain longer tab labels and a larger number of tabs.
MODE_SCROLLABLEはたくさんのtabsの状況に適しています。スクロールできます。もし京東のあの混雑効果を実現するにはMODE_が必要です。FIXEDです。
開発ニーズを満足させるために、TabLayoutはカスタムTabLayoutのスタイルを実現し、導入することにより
app:tabTextApplearance="
カスタムiconをtabに追加します。
現在のTabLayoutはiconを追加する方法がありません。Spannable Stringを使ってImageSpanと結合して実現できます。
部分コード:https://github.com/xiangzhihong/jingdongApp
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
この二日間は京東の詳しいページを真似して、上のTabを切り替えます。以前は自分でView pager+fragmentを書いていました。あるいはIndicatorの深さを注文して、TabLayoutを試してみたいです。すると、次の穴があります。
次は私の簡単な実現効果です。
参照ライブラリを追加
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'
compile 'com.android.support:recyclerview-v7:24.2.0'
compile 'com.android.support:cardview-v7:24.2.0'
}
ToolbarとTabLayout実現されたレイアウトを見てみましょう。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/c12"
android:gravity="center_vertical"
android:minHeight="45dp"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="@+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/back_icon" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabGravity="center"
app:tabMode="fixed"
app:tabTextColor="@color/c7"
app:tabSelectedTextColor="@color/c8"/>
</LinearLayout>
<ImageView
android:id="@+id/toolbar_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/more_icon" />
</LinearLayout>
<View style="@style/horizontal_line" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View style="@style/horizontal_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/c12"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text=" "
android:textSize="10sp" />
<View style="@style/vertical_line" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text=" "
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.5"
android:background="@color/c8"
android:gravity="center">
<TextView
style="@style/style_c12_s16"
android:gravity="center"
android:text=" " />
</LinearLayout>
</LinearLayout>
</LinearLayout>
このレイアウトファイルの最も重要なポイントは、android.support.design.widget.TabLayoutタグの中のap:tabMode="scrollable"であり、彼はtabのモードを設定します。他の使い方はIndicatorの使い方と同じです。アダプターを設置して、データを通じてページのフィットを実現します。直接コード
Adapter
public class ProductDetailPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments=null;
private List<String> mTitles=null;
public ProductDetailPagerAdapter(FragmentManager fm, List<Fragment> mFragments,List<String> mTitles) {
super(fm);
this.mFragments =mFragments;
this.mTitles=mTitles;
}
public ProductDetailPagerAdapter(FragmentManager fm, Fragment... fragments) {
super(fm);
this.mFragments = Arrays.asList(fragments);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
ホームページの関連ロジックですが、ここのフラジャイティは簡単なフラジャイティです。
public class ProductDetailsActivity extends BaseActivity {
@BindView(R.id.viewPager)
ViewPager viewPager;
@BindView(R.id.toolbar_more)
ImageView toolbarMore;
@BindView(R.id.tabLayout)
TabLayout tabLayout;
private List<Fragment> mFragments;
private String[] titles = new String[]{" ", " "};
private ProductDetailPagerAdapter productPagerAdapter = null;
private MorePopupWindow popupWindow = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product_details);
ButterKnife.bind(this);
init();
}
private void init() {
initViewPager();
}
private void initViewPager() {
mFragments = new ArrayList<>();
mFragments.add(new ProductFragment());
mFragments.add(new ProductDetailFragment());
productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(), mFragments, Arrays.asList(titles));
viewPager.setOffscreenPageLimit(2);
viewPager.setAdapter(productPagerAdapter);
viewPager.setCurrentItem(1);
tabLayout.setupWithViewPager(viewPager);
}
@OnClick(R.id.back)
public void backClick() {
finish();
}
@OnClick(R.id.toolbar_more)
public void moreClick() {
}
private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
popupWindow.dismiss();
}
};
public static void open(Context context) {
Intent intent = new Intent(context, ProductDetailsActivity.class);
context.startActivity(intent);
}
}
上のコードは比較的簡単です。説明をしすぎないで、TabLayoutを使う時に注意しなければなりません。tabmodeは二つの属性値があります。
MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE:Scrllable tabs display a subset of tabs at any given moment、and can contain longer tab labels and a larger number of tabs.
MODE_SCROLLABLEはたくさんのtabsの状況に適しています。スクロールできます。もし京東のあの混雑効果を実現するにはMODE_が必要です。FIXEDです。
開発ニーズを満足させるために、TabLayoutはカスタムTabLayoutのスタイルを実現し、導入することにより
app:tabTextApplearance="
カスタムiconをtabに追加します。
現在のTabLayoutはiconを追加する方法がありません。Spannable Stringを使ってImageSpanと結合して実現できます。
private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
};
// ...
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
動作は、TabLayoutが作成したtabがデフォルトでtextAllCaps属性をtrueとして設定しているため、これはImageSpanがレンダリングされるのを阻止しています。以下のスタイルファイル定義で変更できます。
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
そして、getPageTitleメソッドにタイトルのtabを設定します。
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
// Replace blank spaces with image icon
SpannableString sb = new SpannableString(" " + tabTitles[position]);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
TabLayoutはまたカスタムViewをサポートしています。getTabViewを通じて設定します。ここではどうやって実現するかは分かりません。興味のあるものは自分で研究できます。部分コード:https://github.com/xiangzhihong/jingdongApp
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。