美文网首页Android专题开源库ui
WheelView:3D滚动控件使用之酷炫选择器功能

WheelView:3D滚动控件使用之酷炫选择器功能

作者: 千夜零一 | 来源:发表于2020-10-21 12:28 被阅读0次

引言

  很多时候我们需要做选择器,比如列表选择、时间选择、地区选择等等。但有时候我们会发现平面的让我们已经审美疲劳,怎么推陈出新,给用户以更棒的视觉效果体验呢?
  WheelView来做这样的酷炫功能绝对吸睛!快@你的小伙伴来一起学习吧!



用法

第一步:添加依赖(app下build.gradle中)

//wheelView
    implementation 'com.contrarywind:wheelview:4.1.0'

第二步:在布局文件中使用控件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".blog.Case49"
    tools:ignore="MissingConstraints" >

    <TextView
        android:id="@+id/title1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:textSize="20sp"
        android:textColor="@color/white"
        android:padding="10dp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        android:text="WheelView可滚动控件" />

    <com.contrarywind.view.WheelView
        android:id="@+id/wheelview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title1"
        app:layout_constraintBottom_toTopOf="@id/title2"
        />
    <TextView
        android:id="@+id/title2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:textSize="20sp"
        android:textColor="@color/white"
        android:padding="10dp"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="@id/wheelview2"
        app:layout_constraintTop_toBottomOf="@id/wheelview1"
        android:text="WheelView可循环滚动控件" />

    <com.contrarywind.view.WheelView
        android:id="@+id/wheelview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title2"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

第三步:在Activity中书写业务逻辑代码

public class Case49 extends AppCompatActivity {
    private WheelView wheelView1;
    private WheelView wheelView2;
    private List<String> mOptionsItems = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case49);
        initList();
        initView1();
        initView2();
    }
    private void initView1(){
        wheelView1 = findViewById(R.id.wheelview1);
        wheelView1.setCyclic(false); //设置不可循环滚动
        setWheelView(wheelView1);
    }
    private void initView2(){
        wheelView2 = findViewById(R.id.wheelview2);
        wheelView2.setCyclic(true); //设置循环滚动
        setWheelView(wheelView2);
    }
    private void initList(){
        mOptionsItems.add("中国");
        mOptionsItems.add("加利福尼亚");
        mOptionsItems.add("俄罗斯");
        mOptionsItems.add("美国");
        mOptionsItems.add("索马里海域大三峡");
        mOptionsItems.add("中国");
        mOptionsItems.add("加利福尼亚");
        mOptionsItems.add("俄罗斯");
        mOptionsItems.add("美国");
        mOptionsItems.add("索马里海域大三峡");
        mOptionsItems.add("中国");
        mOptionsItems.add("加利福尼亚");
        mOptionsItems.add("日本");
        mOptionsItems.add("俄罗斯");
        mOptionsItems.add("美国");
        mOptionsItems.add("索马里海域大三峡");
    }
    private void setWheelView(WheelView wheelView){
        wheelView.setAdapter(new ArrayWheelAdapter(mOptionsItems));
        wheelView.setOnItemSelectedListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelected(int index) {
                Toast.makeText(getBaseContext(), "" + mOptionsItems.get(index), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

大功告成!


效果图展示

wheelView.jpeg

相关文章

网友评论

    本文标题:WheelView:3D滚动控件使用之酷炫选择器功能

    本文链接:https://www.haomeiwen.com/subject/unismktx.html