android TabLayout 사용 방법 상세 설명
이틀 동안 경 동의 상세 한 상황 을 모방 한 페이지 를 만들어 야 합 니 다.위의 Tab 전환 은 예전 에 자신 이 Viewpager+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">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center_vertical"
app:navigationIcon="@drawable/back_icon"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/style_c7_s20"
/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="@drawable/more_icon" />
</android.support.v7.widget.Toolbar>
<View style="@style/horizontal_line" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
이 레이아웃 파일 의 가장 중요 한 점 은 android.support.design.widget.TabLayout 탭 에 있 는 app:tabMode="scrollable"입 니 다.그 는 tab 의 모드 를"미 끄 러 질 수 있 는"것 으로 설정 합 니 다.다른 용법 과 Indicator 의 용법 은 차이 가 많 지 않 습 니 다.어댑터 를 설정 한 다음 에 데 이 터 를 통 해 페이지 의 적합 을 실현 해 야 합 니 다.직접 코드
Adapter
public class ProductDetailPagerAdapter extends FragmentPagerAdapter {
private List<String> mTitles;
public ProductDetailPagerAdapter(FragmentManager fm, List<String> mTitles) {
super(fm);
this.mTitles = mTitles;
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
return new ProductFragment();
} else if (position == 1) {
return new ProductDetailFragment();
}
return new ProductFragment();
}
@Override
public int getCount() {
return mTitles.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
홈 페이지 의 관련 논리,이곳 의 Fragment 는 간단 한 Fragment 입 니 다.
public class ProductDetailsActivity extends BaseActivity {
@BindView(R.id.viewPager)
ViewPager viewPager;
@BindView(R.id.tabLayout)
TabLayout tabLayout;
@BindView(R.id.toolbar)
Toolbar toolbar;
private TextView tabProduct;
private TextView tabDetail;
private List<String> mTitles = null;
private ProductDetailPagerAdapter productPagerAdapter = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product_details);
ButterKnife.bind(this);
init();
}
private void init() {
initToolbar();
initViewPager();
}
private void initToolbar() {
setTitle("");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});
initTab();
initTabChange();
}
private void initTabChange() {
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
switch (tab.getPosition()){
case 0:
tabProduct.setTextColor(getResources().getColor(R.color.c8));
tabProduct.setTextSize(18);
break;
case 1:
tabDetail.setTextColor(getResources().getColor(R.color.c8));
tabDetail.setTextSize(18);
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tabProduct.setTextColor(getResources().getColor(R.color.c7));
tabDetail.setTextColor(getResources().getColor(R.color.c7));
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void initTab() {
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.c8));
tabLayout.setSelectedTabIndicatorHeight(UIUtils.dp2px(this, 2));
tabLayout.setTabTextColors(R.color.c7, R.color.c8);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_detail_tab_product_layout));
tabProduct= (TextView) findViewById(R.id.tab_product);
tabProduct.setTextColor(getResources().getColor(R.color.c8));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_detail_tab_detail_layout));
tabDetail= (TextView) findViewById(R.id.tab_detail);
tabProduct.setTextColor(getResources().getColor(R.color.c7));
}
private void initViewPager() {
mTitles = new ArrayList<>();
mTitles.add(" ");
mTitles.add(" ");
productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(), mTitles);
viewPager.setAdapter(productPagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
tabLayout.getTabAt(position).select();
}
});
}
public static void open(Context context) {
Intent intent = new Intent(context, ProductDetailsActivity.class);
context.startActivity(intent);
}
}
저 는 많은 사람들 이 위의 코드 를 보면 귀 찮 을 것 이 라 고 믿 습 니 다.사실은 저도 이런 맞 춤 형 제작 이 가능 하지만 예전 의 쓰기 에 비해 코드 가 줄 어 들 지 않 았 습 니 다.저 는 사용자 정의 컨트롤 을 사용 하 는 것 을 권장 합 니 다.예전 에 안 드 로 이 드 만능 인디케이터 가 있 었 기 때문에 많은 사람들 이 참고 할 수 있 습 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.