UI效果仿写高级UI安卓集中营

炫酷-背景图垂直循环滚动登录页,Android Recycler

2020-05-01  本文已影响0人  Perston

炫酷-背景图上下循环滚动登录页,Android RecyclerView实现方法

某站的登录页背景不停循环滚动,和街边的广告箱很像,感觉不错我也心动了。决定高仿一下,参考了几篇文章后就动手了。
实现步骤:

1.效果图展示
2.自定义实现滚动效果RecyclerView
3.适配器Adapter实现
4.适配器布局文件
5.主程序调用过程
6.主布局文件
7.总结

1.效果图展示

666.gif

2.自定义实现滚动效果RecyclerView

AutoPollRecyclerView.java

public class AutoPollRecyclerView extends RecyclerView {
    private static final long TIME_AUTO_POLL = 16;
    AutoPollTask autoPollTask;
    private boolean running; //标示是否正在自动轮询
    private boolean canRun;//标示是否可以自动轮询,可在不需要的是否置false

    public AutoPollRecyclerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        autoPollTask = new AutoPollTask(this);
    }

    static class AutoPollTask implements Runnable {
        private final WeakReference<AutoPollRecyclerView> mReference;

        //使用弱引用持有外部类引用->防止内存泄漏
        public AutoPollTask(AutoPollRecyclerView reference) {
            this.mReference = new WeakReference<AutoPollRecyclerView>(reference);
        }

        @Override
        public void run() {
            AutoPollRecyclerView recyclerView = mReference.get();
            if (recyclerView != null && recyclerView.running && recyclerView.canRun) {
                recyclerView.scrollBy(2, 2);
                recyclerView.postDelayed(recyclerView.autoPollTask, recyclerView.TIME_AUTO_POLL);
            }
        }
    }

    //开启:如果正在运行,先停止->再开启
    public void start() {
        if (running)
            stop();
        canRun = true;
        running = true;
        postDelayed(autoPollTask, TIME_AUTO_POLL);
    }

    public void stop() {
        running = false;
        removeCallbacks(autoPollTask);
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (running)
                    stop();
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_OUTSIDE:
                if (canRun)
                    start();
                break;
        }
        //return  false,注释掉onTouchEvent()方法里面的stop和start方法,则列表自动滚动且不可触摸
        return super.onTouchEvent(e);}
}

3.适配器Adapter实现

AutoPollAdapter.java

public class AutoPollAdapter extends RecyclerView.Adapter<AutoPollAdapter.BaseViewHolder> {
    private final Context mContext;


    public AutoPollAdapter(Context context) {
        this.mContext = context;
    }

    @Override
    public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.auto_list_item, parent, false);
        BaseViewHolder holder = new BaseViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(BaseViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return Integer.MAX_VALUE;
    }

    class BaseViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public BaseViewHolder(View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.iv_login_bg);

        }
    }

}

4.适配器布局文件

auto_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_login_bg"
    android:layout_width="480dp"
    android:layout_height="2065dp"
    android:scaleType="matrix"
    android:adjustViewBounds="true"
    android:background="@drawable/login_bg01"/>

5.主程序调用过程

LoginActivity.java

public class LoginActivity extends AppCompatActivity {
    private AutoPollRecyclerView recyclerView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        recyclerView = findViewById(R.id.recyclerview);

        recyclerView.setLayoutManager(
                new LinearLayoutManager(
                        this,
                        //设置LinearLayoutManager.HORIZONTAL  则水平滚动
                        LinearLayoutManager.VERTICAL, false));

            AutoPollAdapter autoPollAdapter = new AutoPollAdapter(getApplicationContext());
            recyclerView.setAdapter(autoPollAdapter);
            //启动滚动
            recyclerView.start();

    }
}

6.主布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.imooc.guessmusic.view.AutoPollRecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/login_dark" />

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="120dp"
        android:src="@drawable/login_logo" />

    <TextView
        android:layout_width="400dp"
        android:layout_height="60dp"
        android:layout_marginTop="60dp"
        android:layout_gravity="center"
        android:background="@drawable/btn_c"
        android:gravity="center"
        android:textSize="22sp"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:text="微信登录" />
    <TextView
        android:layout_width="400dp"
        android:layout_height="60dp"
        android:layout_marginTop="150dp"
        android:layout_gravity="center"
        android:background="@drawable/btn_c_b"
        android:gravity="center"
        android:textSize="22sp"
        android:textColor="@color/text_white"
        android:text="手机号码快捷登录" />
</FrameLayout>

7.总结

Demo里面使用了沉浸式效果,如何实现请参考下面的文章。
Android-沉浸式的实现
Demo里面使用了今日头条适配方案能适配97%的手机,3%刘海屏与水滴屏未做适配,是如何实现请参考下面的文章。
今日头条的屏幕适配方案,简易使用
核心代码就是自定义的RecyclerView代码,如果你想做其它效果的滚动可以参考下面的文章。
Android实现类似中奖信息自动滚动效果

Android RecyclerView打造自动循环效果

原代码献上:https://pan.baidu.com/s/18sy-Gvjav8Dz2PwctrDcFw
提取码:sr0i

上一篇下一篇

猜你喜欢

热点阅读