android模仿唱吧榜单界面,仿唱吧UI效果

这几天想放开歌喉 唱歌 下了唱吧app,发现里面的交互效果 挺好玩的,突然就想写出来 (可能这就是本能吧)

左侧是本地效果,图二是唱吧效果

这里写代码片

这里写图片描述

这里写图片描述

这里写图片描述

实现1

想下移动这个实现较为简单 实际是个ViewPager+FragmentPagerAdapter 的操作 ,然后加个Fragment的动画

public class ChangBarViewPagerTransforms implements ViewPager.PageTransformer {

private int height=300;

@Override

public void transformPage(View page, float position) {

if (position > 0 && position <= 1) {//right scorlling

page.setTranslationY(-height * position);

page.setAlpha(1-position);

} else if (position >= -1 && position < 0) {//left scrolling

page.setTranslationY(height * position);

page.setAlpha(1-position);

} else {

}

}

}

这这样实现了 唱吧切换的效果 这个实现还是基本操作的

实现2

最难的感觉还是顶部栏背景的变色 扩散的形式变色 看上去很酷炫 ,操作还是shader取处理的 通过LinearGradient

然后处理起始的坐标,案例中简单的通过rgb 中的b 递增来做到 首位的颜色相近, 大体的思路是这样的

public class ColorBar extends FrameLayout {

Shader mLinearGradient1 = null;

Paint mPaint = null;

private Point mCurrentPoint;

public ColorBar(@NonNull Context context) {

super(context);

init();

}

public ColorBar(@NonNull Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

public ColorBar(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

private void init() {

setWillNotDraw(false);

Random random = new Random();

r = random.nextInt(256);

g = random.nextInt(256);

b = random.nextInt(256);

endr=r;

endg=g;

endb=0;

}

private int num=0;

private int r;

private int g;

private int b;

private int endr;

private int endg;

private int endb;

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Point changeColrPoint = getChangeColrPoint();

mLinearGradient1 = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(), new int[]{

changeColrPoint.x,changeColrPoint.y}, null,

Shader.TileMode.CLAMP);

mPaint = new Paint();

mPaint.setShader(mLinearGradient1);

canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

postDelayed(new Runnable() {

@Override

public void run() {

invalidate();

}

},50);

}

private Point getChangeColrPoint(){

if (num>= b){

mCurrentPoint=null;

init();

num=0;

}

if (mCurrentPoint==null){

mCurrentPoint= new Point(Color.rgb(r,g,b),Color.rgb(endr,endg,endb));

}

mCurrentPoint.y=Color.rgb(endr,endg,num);

num++;

return mCurrentPoint;

}

}

android:id="@+id/color_bar"

android:layout_width="match_parent"

android:layout_height="45dp">

android:layout_width="match_parent"

android:orientation="vertical"

android:gravity="center"

android:layout_height="match_parent">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:shadowColor="#0f0"

android:textSize="16sp"

android:gravity="center"

android:text="标题栏"/>