仿蝦米音樂(lè)新版Tab標(biāo)簽頁(yè)

效果有點(diǎn)粗略，先上個(gè)圖
xiami.gif

分析

通過(guò)觀(guān)察蝦米音樂(lè)的動(dòng)畫(huà)以及查看布局邊界，猜測(cè)蝦米多半是自定義的tabview，而本文采用的是很常見(jiàn)的TabLayout+Viewpager+Fragment布局，以及自定義View實(shí)現(xiàn)聲波的效果。隨著手指滑動(dòng)下一頁(yè)字體慢慢變大，上一頁(yè)字體慢慢變小，同事indicator也跟著放大縮小。效果與蝦米有些不同。

實(shí)現(xiàn)

Activity布局

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".XiamiActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"
        app:tabIndicatorHeight="0dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

TabLayout默認(rèn)的indicator是一條線(xiàn)，將高度設(shè)置為0dp將其隱藏，同時(shí)tablayout每個(gè)tab默認(rèn)有padding，通過(guò)設(shè)置 app:tabPaddingStart="0dp" 和app:tabPaddingEnd="0dp"去掉這個(gè)間距。

Activity類(lèi)

public class XiamiActivity extends AppCompatActivity {

    private TabLayout tablayout;
    private ViewPager viewpager;
    private String[] titles = {"樂(lè)庫(kù)", "推薦", "趴間", "看點(diǎn)"};
    private int textMinWidth = 0;
    private int textMaxWidth = 0;
    private boolean isClickTab;
    private float mLastPositionOffsetSum;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xiami);

        tablayout = findViewById(R.id.tablayout);
        viewpager = findViewById(R.id.viewpager);
        viewpager.setAdapter(new XiamiAdapter(this, getSupportFragmentManager()));
        tablayout.setupWithViewPager(viewpager);

        initSize();

        for (int i = 0; i < 4; i++) {
            TabLayout.Tab tab = tablayout.getTabAt(i);
            assert tab != null;
            tab.setCustomView(R.layout.tab_item);//給tab自定義樣式
            assert tab.getCustomView() != null;
            AppCompatTextView textView = tab.getCustomView().findViewById(R.id.tab_text);
            textView.setText(titles[i]);
            if (i == 0) {
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);//第一個(gè)tab被選中
                ((AppCompatTextView) tab.getCustomView().findViewById(R.id.tab_text)).setWidth(textMaxWidth);
                ((WaveView) tab.getCustomView().findViewById(R.id.wave)).setWaveWidth(textMaxWidth, true);
            } else {
                ((AppCompatTextView) tab.getCustomView().findViewById(R.id.tab_text)).setWidth(textMinWidth);
                ((WaveView) tab.getCustomView().findViewById(R.id.wave)).setWaveWidth(textMinWidth, false);
            }
        }
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // 當(dāng)前總的偏移量
                float currentPositionOffsetSum = position + positionOffset;
                // 上次滑動(dòng)的總偏移量大于此次滑動(dòng)的總偏移量，頁(yè)面從右向左進(jìn)入(手指從右向左滑動(dòng))
                boolean rightToLeft = mLastPositionOffsetSum <= currentPositionOffsetSum;
                if (currentPositionOffsetSum == mLastPositionOffsetSum) return;
                int enterPosition;
                int leavePosition;
                float percent;
                if (rightToLeft) {  // 從右向左滑
                    enterPosition = (positionOffset == 0.0f) ? position : position + 1;
                    leavePosition = enterPosition - 1;
                    percent = (positionOffset == 0.0f) ? 1.0f : positionOffset;
                } else {            // 從左向右滑
                    enterPosition = position;
                    leavePosition = position + 1;
                    percent = 1 - positionOffset;
                }
                Log.d("ViewPager", "onPageScrolled————>"
                        + "    進(jìn)入頁(yè)面：" + enterPosition
                        + "    離開(kāi)頁(yè)面：" + leavePosition
                        + "    滑動(dòng)百分比：" + percent);
                if (!isClickTab) {
                    int width = (int) (textMinWidth + (textMaxWidth - textMinWidth) * (1 - percent));
                    ((AppCompatTextView) (tablayout.getTabAt(leavePosition).getCustomView().findViewById(R.id.tab_text)))
                            .setWidth(width);
                    ((AppCompatTextView) (tablayout.getTabAt(enterPosition).getCustomView().findViewById(R.id.tab_text)))
                            .setWidth((int) (textMinWidth + (textMaxWidth - textMinWidth) * percent));
                }

                mLastPositionOffsetSum = currentPositionOffsetSum;
            }

            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < 4; i++) {
                    TabLayout.Tab tab = tablayout.getTabAt(i);
                    assert tab != null;
                    if (i == position)
                        ((WaveView) tab.getCustomView().findViewById(R.id.wave))
                                .setWaveWidth(textMaxWidth, true);
                    else
                        ((WaveView) tab.getCustomView().findViewById(R.id.wave))
                                .setWaveWidth(textMinWidth, false);
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (state == 0) {
                    isClickTab = false;
                }
            }
        });
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                isClickTab = true;
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);
                viewpager.setCurrentItem(tab.getPosition());
                ((AppCompatTextView) (tab.getCustomView().findViewById(R.id.tab_text))).setWidth(textMaxWidth);
                ((WaveView) tab.getCustomView().findViewById(R.id.wave)).setWaveWidth(textMaxWidth, true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(false);
                ((AppCompatTextView) (tab.getCustomView().findViewById(R.id.tab_text))).setWidth(textMinWidth);
                ((WaveView) tab.getCustomView().findViewById(R.id.wave)).setWaveWidth(textMinWidth, false);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {


            }
        });
    }

    private void initSize() {
        TextView tv = new TextView(this);
        tv.setTextSize(14);
        TextPaint textPaint = tv.getPaint();
        textMinWidth = (int) textPaint.measureText("樂(lè)庫(kù)");
        tv = new TextView(this);
        tv.setTextSize(28);
        textPaint = tv.getPaint();
        textMaxWidth = (int) textPaint.measureText("樂(lè)庫(kù)");
    }
}

Tab中文字大小的變化開(kāi)始用setText根據(jù)滑動(dòng)的percent來(lái)變化，發(fā)現(xiàn)看起來(lái)不太連貫，遂選擇用android support 26版本中的TextView新特性autoSize來(lái)實(shí)現(xiàn)。tab_item.xml布局如下：

<?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="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal|bottom"
        android:maxLines="1"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="#f58822"
        app:autoSizeMinTextSize="14sp"
        android:autoSizeMaxTextSize="28sp"
        app:autoSizeTextType="uniform" />

    <com.harvey.xiamidemo.WaveView
        android:id="@+id/wave"
        android:layout_width="match_parent"
        android:layout_height="20dp"/>
</LinearLayout>

聲波效果簡(jiǎn)單的通過(guò)隨機(jī)生成幾個(gè)y軸的點(diǎn)，移動(dòng)x軸坐標(biāo)，通過(guò)圓滑的畫(huà)筆畫(huà)出來(lái)的，代碼如下：

public class WaveView extends View {
    private Paint mPaint;

    private Path mPath;

    private float mDrawHeight;

    private float mDrawWidth;

    private float amplitude[];
    private float waveWidth;
    private float waveStart, waveEnd;
    private boolean isMax = true;

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStrokeWidth(1.5f);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#f58822"));
        CornerPathEffect cornerPathEffect = new CornerPathEffect(300);
        mPaint.setPathEffect(cornerPathEffect);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        widthMeasureSpec = measureWidth(widthMeasureSpec);
        heightMeasureSpec = measureHeight(heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        mDrawWidth = getMeasuredWidth() - paddingLeft - paddingRight;
        mDrawHeight = getMeasuredHeight() - paddingTop - paddingBottom;
        initOthers();
    }

    public void setWaveWidth(float waveWidth, boolean isMax) {
        this.waveWidth = waveWidth;
        this.isMax = isMax;
        invalidate();
    }

    private void initOthers() {
        waveStart = (mDrawWidth - waveWidth) / 2;
        waveEnd = waveStart + waveWidth;
        float mAmplitude = isMax ? mDrawHeight / 2 : mDrawHeight / 4;
        amplitude = new float[20];
        Random random = new Random();
        for (int i = 0; i < 20; i++) {
            if (i % 2 == 0)
                amplitude[i] = mDrawHeight / 2 + (random.nextFloat() + 0.3f) * mAmplitude;
            else
                amplitude[i] = mDrawHeight / 2 - (random.nextFloat() + 0.3f) * mAmplitude;
        }
    }

    private int measureWidth(int spec) {
        int mode = MeasureSpec.getMode(spec);
        if (mode == MeasureSpec.UNSPECIFIED) {
            DisplayMetrics dm = getResources().getDisplayMetrics();
            int width = dm.widthPixels;
            spec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
        } else if (mode == MeasureSpec.AT_MOST) {
            int value = MeasureSpec.getSize(spec);
            spec = MeasureSpec.makeMeasureSpec(value, MeasureSpec.EXACTLY);
        }
        return spec;
    }

    private int measureHeight(int spec) {
        int mode = MeasureSpec.getMode(spec);
        if (mode == MeasureSpec.EXACTLY) {
            return spec;
        }

        int height = (int) dip2px(50); // 其他模式下的最大高度

        if (mode == MeasureSpec.AT_MOST) {
            int preValue = MeasureSpec.getSize(spec);
            if (preValue < height) {
                height = preValue;
            }
        }
        spec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        return spec;
    }

    private float dip2px(float dp) {
        DisplayMetrics dm = getResources().getDisplayMetrics();
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, dm);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPath.reset();
        mPath.moveTo(0, mDrawHeight / 2);
        mPath.lineTo(waveStart, mDrawHeight / 2);
        //使前端直線(xiàn)慢慢過(guò)渡，不要太平滑
        for (int i = 0; i < 6; i++) {
            if (amplitude[0] > 0)
                mPath.lineTo(waveStart, mDrawHeight / 2 + i * 2);
            else
                mPath.lineTo(waveStart, mDrawHeight / 2 - i * 2);
        }

        for (int i = 0; i < amplitude.length; i++) {
            mPath.lineTo(waveStart + i * waveWidth / 20, amplitude[i]);
        }
        mPath.lineTo(waveEnd, mDrawHeight / 2);
        //使尾端直線(xiàn)慢慢過(guò)渡，不要太平滑
        for (int i = 0; i < 6; i++) {
            mPath.lineTo(waveEnd + i * 2, mDrawHeight / 2);
        }
        mPath.lineTo(mDrawWidth + 40, mDrawHeight / 2);
        canvas.drawPath(mPath, mPaint);
    }
}

具體代碼見(jiàn)https://github.com/HarveyLee1228/XiamiTabLayout 。實(shí)現(xiàn)的有點(diǎn)粗糙，也可能有bug，有時(shí)間我會(huì)修改。寫(xiě)的不好的地方請(qǐng)賜教。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容