Home

Awesome

LitePager,一个轻量级的ViewPager,仿新版网易云歌单广场

博客详情: https://blog.csdn.net/u011387817/article/details/89142467

使用方式:

添加依赖:

implementation 'com.wuyr:litepager:1.3.1'

APIs:

MethodDescription
addViews(int... layouts)批量添加子View
addViews(View... views)批量添加子View
setSelection(View target)选中指定子View
setSelection(int index)根据索引选中子View
setOrientation(int orientation)设置滑动方向(默认: ORIENTATION_HORIZONTAL):<br>ORIENTATION_HORIZONTAL(水平)<br>ORIENTATION_VERTICAL(垂直)
setFlingDuration(long duration)设置动画的时长
setTopScale(float scale)设置顶层缩放比例
setTopAlpha(float alpha)设置顶层不透明度
setMiddleScale(float scale)设置中层缩放比例
setMiddleAlpha(float alpha)设置中层不透明度
setBottomScale(float scale)设置底层缩放比例
setBottomAlpha(float alpha)设置底层不透明度
setOnScrollListener(OnScrollListener listener)设置滚动状态监听:<br>STATE_IDLE(静止状态)<br>STATE_DRAGGING_LEFT(向左拖动)<br>STATE_DRAGGING_RIGHT(向右拖动)<br>STATE_DRAGGING_TOP(向上拖动)<br>STATE_DRAGGING_BOTTOM(向下拖动)<br>STATE_SETTLING_LEFT(向左调整)<br>STATE_SETTLING_RIGHT(向右调整)<br>STATE_SETTLING_TOP(向上调整)<br>STATE_SETTLING_BOTTOM(向下调整)<br>
setOnItemSelectedListener(SelectedListener listener)设置子View被选中的监听
getSelectedChild()获取当前选中的子View
setAutoScrollEnable(boolean enable)设置是否开启自动轮播 (默认: false)
setAutoScrollInterval(long interval)设置自动轮播的间隔 (默认: 5000 ms)
setAutoScrollOrientation(int orientation)设置自动轮播的方向(默认: SCROLL_ORIENTATION_LEFT):<br>SCROLL_ORIENTATION_LEFT(向左滚动)<br>SCROLL_ORIENTATION_RIGHT(向右滚动)<br>SCROLL_ORIENTATION_UP(向上滚动)<br>SCROLL_ORIENTATION_DOWN(向下滚动)<br>
setAdapter(Adapter adapter)使用Adapter来添加子View(见下)

Attributes:

NameFormatDescription
orientationenum (默认: horizontal)<br>horizontal(水平)<br>vertical(垂直)滑动方向
flingDurationinteger动画时长
topScalefloat (默认: 1)顶层缩放比例
topAlphafloat (默认: 1)顶层不透明度
middleScalefloat (默认: 0.8)中层缩放比例
middleAlphafloat (默认: 0.4)中层不透明度
bottomScalefloat (默认: 0.6)底层缩放比例
bottomAlphafloat (默认: 0.2)底层不透明度
autoScrollboolean (默认: false)是否开启自动轮播
autoScrollIntervalfloat (默认: 5000)自动轮播的间隔
autoScrollOrientationenum (默认: left)<br>left(向左滚动)<br>right(向右滚动)<br>up(向上滚动)<br>down(向下滚动)自动轮播的方向

添加子View方式:

1. XML

    <com.wuyr.litepager.LitePager
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:background="#F00" />

        <View
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:background="#0F0"/>

        <View
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:background="#00F"/>
    </com.wuyr.litepager.LitePager>

2. 批量添加

    LitePager litePager = ...;
    View child1 = ...;
    View child2 = ...;
    View child3 = ...;

    litePager.addViews(child1, child2, child3);

3. 通过布局添加

    litePager.addViews(
        R.layout.view_child1 
        R.layout.view_child2,
        R.layout.view_child3
    );

4. 设置适配器

示例: Item布局:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="250dp"
    android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="30sp" />
</FrameLayout>

Java代码:

litePager.setAdapter(new Adapter<ViewGroup>() {

    private List<String> mData = new ArrayList<>(Arrays.asList("Item 1", "Item2", "Item3"));

    @Override
    protected ViewGroup onCreateView(@NonNull ViewGroup parent) {
        return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view, parent, false);
    }

    @Override
    protected void onBindView(@NonNull ViewGroup viewGroup, int position) {
        TextView textView = viewGroup.findViewById(R.id.text);
        textView.setText(mData.get(position));
    }

    @Override
    protected int getItemCount() {
        return mData.size();
    }
});
<br>

Demo下载: app-debug.apk

Demo源码地址: https://github.com/wuyr/LitePager

效果 (图1为网易云原效果):

preview preview preview preview