效果有點粗略拼窥，先上個圖
xiami.gif
分析
通過觀察蝦米音樂的動畫以及查看布局邊界，猜測蝦米多半是自定義的tabview箱沦，而本文采用的是很常見的TabLayout+Viewpager+Fragment布局括儒，以及自定義View實現(xiàn)聲波的效果。隨著手指滑動下一頁字體慢慢變大良蛮，上一頁字體慢慢變小，同事indicator也跟著放大縮小悍赢。效果與蝦米有些不同决瞳。
實現(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默認的indicator是一條線，將高度設(shè)置為0dp將其隱藏左权，同時tablayout每個tab默認有padding皮胡，通過設(shè)置 app:tabPaddingStart="0dp" 和app:tabPaddingEnd="0dp"去掉這個間距。
Activity類
public class XiamiActivity extends AppCompatActivity {
private TabLayout tablayout;
private ViewPager viewpager;
private String[] titles = {"樂庫", "推薦", "趴間", "看點"};
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);//第一個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;
// 上次滑動的總偏移量大于此次滑動的總偏移量赏迟，頁面從右向左進入(手指從右向左滑動)
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————>"
+ " 進入頁面：" + enterPosition
+ " 離開頁面：" + leavePosition
+ " 滑動百分比：" + 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("樂庫");
tv = new TextView(this);
tv.setTextSize(28);
textPaint = tv.getPaint();
textMaxWidth = (int) textPaint.measureText("樂庫");
}
}
Tab中文字大小的變化開始用setText根據(jù)滑動的percent來變化屡贺，發(fā)現(xiàn)看起來不太連貫，遂選擇用android support 26版本中的TextView新特性autoSize來實現(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>
聲波效果簡單的通過隨機生成幾個y軸的點甩栈，移動x軸坐標(biāo)泻仙，通過圓滑的畫筆畫出來的，代碼如下：
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);
//使前端直線慢慢過渡量没，不要太平滑
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);
//使尾端直線慢慢過渡玉转，不要太平滑
for (int i = 0; i < 6; i++) {
mPath.lineTo(waveEnd + i * 2, mDrawHeight / 2);
}
mPath.lineTo(mDrawWidth + 40, mDrawHeight / 2);
canvas.drawPath(mPath, mPaint);
}
}
具體代碼見https://github.com/HarveyLee1228/XiamiTabLayout 。實現(xiàn)的有點粗糙殴蹄，也可能有bug究抓，有時間我會修改。寫的不好的地方請賜教袭灯。
