Android 에서 TabLayout 사용자 정의 배경 슬라이더 를 선택 하 는 인 스 턴 스 코드

TabLayout 는 Android 의 Material Design 패키지 의 컨트롤 로 V4 패키지 의 ViewPager 와 조합 하여 연동 효 과 를 낼 수 있 습 니 다.TabLayout 를 따라 슬라이딩 선택 을 할 수 있 는 슬라이더 를 사용자 정의 하 였 습 니 다.효 과 는 다음 그림(흰색 사각형)참조:

다음은 SliderLayout 의 원본 코드 입 니 다.

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.lang.ref.WeakReference;
/**
* Created by yyw on 2016/4/28.
*          index   
*/
public class SliderLayout extends LinearLayout {
private int totalNum = 0;
private ImageView mSlider;
private Drawable mSliderImage;
private WeakReference<TabLayout> mTabLayoutRef;
public SliderLayout(Context context) {
this(context, null);
}
public SliderLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SliderLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SliderLayout);
mSliderImage = array.getDrawable(R.styleable.SliderLayout_slider_pic);
if (mSliderImage == null) {
mSliderImage = context.getResources().getDrawable(R.drawable.slider);
}
array.recycle();
init(context);
}
private void init(Context context) {
mSlider = new ImageView(context);
mSlider.setImageDrawable(mSliderImage);
addView(mSlider, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
resetSlider();
}
/**
*       
*/
private void resetSlider() {
if (getOrientation() == HORIZONTAL) {
resetHorizontalSlider();
}
}
/**
*            
*/
private void resetHorizontalSlider() {
if (mTabLayoutRef == null) return;
TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout == null) return;
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
totalNum = mTabStrip.getChildCount();
if (totalNum > 0) {
View firstView = mTabStrip.getChildAt(0);
int width = firstView.getMeasuredWidth();
resetSlider(width);
}
}
//         
private void resetSlider(int width) {
LayoutParams params = (LayoutParams) mSlider.getLayoutParams();
params.width = width;//         
params.height = getHeight() / 2;
params.gravity = Gravity.CENTER_VERTICAL;
mSlider.setPadding(width / 10, 0, width / 10, 0);//  View       
mSlider.setLayoutParams(params);
}
public void setupWithTabLayout(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
resetHorizontalSlider();
}
public static final String TAG = SliderLayout.class.getName();
public static class SliderOnPageChangeListener extends TabLayout.TabLayoutOnPageChangeListener {
private final WeakReference<SliderLayout> mSliderLayoutRef;
public SliderOnPageChangeListener(TabLayout tabLayout, SliderLayout layout) {
super(tabLayout);
mSliderLayoutRef = new WeakReference<SliderLayout>(layout);
layout.setupWithTabLayout(tabLayout);
}
@Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
final SliderLayout layout = mSliderLayoutRef.get();
if (layout != null) {
layout.setScrollPosition(position, positionOffset);
}
}
}
/**
*            
*
* @param position     
* @param positionOffset               
*/
private void setScrollPosition(int position, float positionOffset) {
final int roundedPosition = Math.round(position + positionOffset);
if (roundedPosition < 0 || roundedPosition >= totalNum) {
return;
}
float scrollX = calculateScrollXForTab(position, positionOffset);
scrollTo((int) scrollX, 0);
}
/**
*            
*
* @param position        
* @param positionOffset         
* @return      
*/
private int calculateScrollXForTab(int position, float positionOffset) {
TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout == null) return 0;
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
if (mTabStrip == null) return 0;
//     View
final View selectedChild = mTabStrip.getChildAt(position);
//   View
final View nextChild = position + 1 < mTabStrip.getChildCount()
? mTabStrip.getChildAt(position + 1)
: null;
//     View   
final int selectedWidth = selectedChild != null ? selectedChild.getWidth() : 0;
//   View   
final int nextWidth = nextChild != null ? nextChild.getWidth() : 0;
//     View     ，view   
final int left = selectedChild != null ? selectedChild.getLeft() : 0;
//           ,  + ，  - ；
int scrollX = -(left + ((int) ((selectedWidth + nextWidth) * positionOffset * 0.5f)));
if (tabLayout.getTabMode() == TabLayout.MODE_SCROLLABLE) {//         TabLayout         
scrollX += tabLayout.getScrollX();//   TabLayout      ，         
}
return scrollX;
}
}

그 중에서 가장 중요 한 종 류 는 SliderOnPageChangeListener 와 같은 계승 TabLayout 입 니 다.TabLayoutOnPageChangeListener 류 는 원본 코드(아래)를 봅 니 다.이것 은 ViewPager 슬라이딩 선택 을 감청 하 는 인터페이스 입 니 다.우리 가 해 야 할 일 은 바로 이런 종류의 기초 위 에서 확장 을 해서 SliderLayout 도 ViewPager 의 미끄럼 을 감청 할 수 있 도록 하 는 것 이다.

public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
private final WeakReference<TabLayout> mTabLayoutRef;
private int mPreviousScrollState;
private int mScrollState;
public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
}
@Override
public void onPageScrollStateChanged(int state) {
mPreviousScrollState = mScrollState;
mScrollState = state;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
//  
}
}
@Override
public void onPageSelected(int position) {
//  
}
private void reset() {
mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
}
}

SliderLayout 가 미 끄 러 질 때마다 거 리 를 계산 하 는 방법 은 calculate ScrollXForTab(int position,float position Offset)입 니 다.
응용 할 때 viewPager.setOnPageChangeListener(new SliderLayout.SliderOnPageChangeListener(mTabLayout,layot)를 주의해 야 합 니 다.mTabLayout.setupWith ViewPager(viewPager)에서;다음 호출:

public class MainActivity extends AppCompatActivity {
public static final String TAG = MainActivity.class.getName();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TabLayout mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
SliderLayout layout = (SliderLayout) findViewById(R.id.slider_layout);
viewPager.setAdapter(new MViewPagerAdapter(getSupportFragmentManager()));
mTabLayout.setupWithViewPager(viewPager);
//      mTabLayout.setupWithViewPager(viewPager)        
viewPager.setOnPageChangeListener(new SliderLayout.SliderOnPageChangeListener(mTabLayout,layout));
}
class MViewPagerAdapter extends FragmentPagerAdapter {
public final String[] names = new String[]{"  ","  ","  ","  ","  ","  ","  ","  ","  ","  "};
public MViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return BlankFragment.newInstance("param1", "param2");
}
@Override
public int getCount() {
return 10;
}
@Override
public CharSequence getPageTitle(int position) {
return names[position];
}
}
}

레이아웃:

<?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">
<FrameLayout
android:layout_width="match_parent"
android:background="@color/cardview_dark_background"
android:layout_height="50dp">
<com.example.yyw.waterripple.SliderLayout
android:id="@+id/slider_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:slider_pic="@drawable/slider"
android:orientation="horizontal" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabGravity="center"
app:tabMode="scrollable"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<declare-styleable name="SliderLayout">
<attr name="slider_pic" format="reference" />
</declare-styleable>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
<solid android:color="#ffffff" />
</shape>

위 에서 말 한 것 은 작은 편집 이 소개 한 안 드 로 이 드 에서 TabLayout 사용자 정의 배경 슬라이더 를 선택 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.작은 편집 자 는 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!