TabLayout 사용법 상세 및 사용자 정의 스타일
app:theme="@style/Widget.Design.TabLayout"
시스템 에서 정 의 된 이 스타일 을 계속 깊이 들 어가 기:
<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMode">fixed</item>
</style>
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabMaxWidth">264dp</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
이 어 시스템 이 Tab 텍스트 를 정의 하 는 스타일 을 보 세 요.(textAllcaps 속성 주의)
<style name="TextAppearance.Design.Tab" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">14dp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
</style>
시스템 정의 TabLayout 의 기본 스타일 을 통 해 알 수 있 듯 이 TabLayout 에 대응 하 는 시스템 스타일 의 속성 값 을 바 꾸 어 우리 의 요구 에 맞 출 수 있 습 니 다.TabLayout 의 기본 용법
TabLayout 를 독립 적 으로 사용 할 때 xml 레이아웃 에 tab 개수 와 스타일 을 정적 으로 추가 할 수도 있 고 Tab 개수 와 스타일 을 동적 으로 추가 할 수도 있 습 니 다.예 를 들 어:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android"/>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"/>
</android.support.design.widget.TabLayout>
또는:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
private int[] images = new int[]{
R.drawable.ic_account_balance_wallet_black,
R.drawable.ic_android_black,
R.drawable.ic_account_box_black};
private String[] tabs = new String[]{" ", " ", " "};
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setIcon(images[0]).setText(tabs[0]),true);
tabLayout.addTab(tabLayout.newTab().setIcon(images[1]).setText(tabs[1]),false);
tabLayout.addTab(tabLayout.newTab().setIcon(images[2]).setText(tabs[2]),false);
TabLayout 는 실제 개발 에서 ViewPager 와 공동으로 사용 하여 TabLayout 와 ViewPager 의 연동 을 실현 합 니 다.
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/holo_orange_dark"
app:tabTextAppearance="@style/CustomTabTextAppearanceStyle"
app:tabTextColor="@android:color/white"
app:theme="@style/Widget.Design.TabLayout"/>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
주의해 야 할 것 은:
TabPagerAdapter 에서 getPagerTitle()을 실현 해 야 합 니 다.그렇지 않 으 면 TabLayout 의 Tab 이 표시 되 지 않 습 니 다.TabLayout\#setupWithPager()소스 코드 를 먼저 보 세 요.Tab 의 추가 가 populate FromPagerAdapter()에서 이 루어 진 것 을 발 견 했 습 니 다.소스 코드 는 다음 과 같 습 니 다.이 방법 은 PagerAdpater\#getPagerTitle()을 Tab 에 텍스트 정 보 를 설정 하 는 것 을 호출 한 것 을 알 수 있 습 니 다.사용자 정의 Adapter 가 getPagerTitle()을 실현 하지 않 으 면 Tab 에서 텍스트 정 보 를 표시 하지 않 습 니 다.
void populateFromPagerAdapter() {
removeAllTabs();
if (mPagerAdapter != null) {
final int adapterCount = mPagerAdapter.getCount();
for (int i = 0; i < adapterCount; i++) {
addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}
// Make sure we reflect the currently set ViewPager item
if (mViewPager != null && adapterCount > 0) {
final int curItem = mViewPager.getCurrentItem();
if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
selectTab(getTabAt(curItem));
}
}
}
}
또한,String 대신 getPagerTitle()방법의 반환 값 CharSequence 를 발견 하면 Tab 의 텍스트 정보 설정 이 더욱 유연 해 집 니 다.예 를 들 어 SpanableString 을 설정 하고 그림 과 텍스트 를 Tab 의 텍스트 로 설정 합 니 다.
@Override
public CharSequence getPageTitle(int position) {
Drawable image = TablayoutActivity.this.getResources().getDrawable(images[position]);
image.setBounds(0, 0, image.getIntrinsicWidth()/2, image.getIntrinsicHeight()/2);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
SpannableString ss = new SpannableString(" "+tabs[position]);
ss.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return ss;
}
그러나 Tab 에 아무런 정보 도 표시 되 지 않 고 공백 상태 입 니 다.위 에서 언급 한 TabLayout 시스템 기본 스타일 에서 우 리 는
<style name="CustomTabTextAppearanceStyle" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
Indicator 길이 변경:
TabLayout 의 원본 코드 를 통 해 알 수 있 듯 이 Indicator 의 그리 기 는 내부 클래스 SlidingTabStrip 에서 그립 니 다.SlingTabStrip 클래스 는 LinearLayout 를 계승 합 니 다.원본 코드 는 다음 과 같 습 니 다.
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
onDraw()에 서 는 주로 Rect 를 그립 니 다.또한 너 비 는 mIndicator Left 와 mIndicator Right 에 따라 설정 되 어 있 으 며,mIndicator Left 등의 너 비 는 SlidingTabStrip 의 child 에서 나 옵 니 다.Child 는 하나의 Tab 에 해당 합 니 다.그러면 우 리 는 Child 의 margin 을 수정 하여 mIndicator Left 의 값 을 설정 합 니 다.
public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
그 다음 에 코드 에서 호출 하면 됩 니 다.그러나 주의해 야 합 니 다.Tablayot 에서 렌 더 링 한 후에 호출 해 야 합 니 다.view.post()방법 을 선택 하여 실현 할 수 있 습 니 다.
tabLayout.post(new Runnable() {
@Override
public void run() {
setIndicator(tabLayout, 20, 20);
}
});
마지막 으로 얻 은 효과 도 는 다음 과 같다.TabLayout 의 TabItem 및 TabItem 클릭 이벤트 사용자 정의
TabLayout 의 Api 는 TabItem 에서 이 벤트 를 클릭 하 는 방법 을 제공 하지 않 았 습 니 다.다음 효과 도 를 실현 하려 면 어떻게 해 야 합 니까?
먼저 TabItem 을 사용자 정의 합 니 다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp" />
<ImageView
android:id="@+id/img_title"
android:src="@drawable/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp" />
</LinearLayout>
사용자 정의 Adapter 에서 getTabView 방법 을 정의 할 수 있 습 니 다.
public View getTabView(int position){
View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
TextView tv= (TextView) view.findViewById(R.id.textView);
tv.setText(tabTitles[position]);
ImageView img = (ImageView) view.findViewById(R.id.imageView);
img.setImageResource(imageResId[position]);
return view;
}
클릭 이벤트 재 설정:
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
if (tab.getCustomView() != null) {
View tabView = (View) tab.getCustomView().getParent();
tabView.setTag(i);
tabView.setOnClickListener(mTabOnClickListener);
}
}
}
viewPager.setCurrentItem(1);
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 TabLayout 용법 에 대한 상세 한 설명 과 사용자 정의 스타일 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Android 에서 TabLayout 사용 에 대한 자세 한 설명저 희 는 viewpager 를 사용 할 때 TabPageIndicator 를 사용 하여 라디오 버튼 을 맞 추거 나 사용자 정의 해서 예 쁜 효 과 를 얻 습 니 다.하지만 TabPageIndicator 는 제3자...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.