美文网首页Android Dev
Android记录material包下的好工具(Slider、S

Android记录material包下的好工具(Slider、S

作者: 坑逼的严 | 来源:发表于2021-10-09 17:19 被阅读0次

    记录一下,万一以后用到了呢?
    导包

    implementation 'com.google.android.material:material:1.2.1'
    

    Slider

    1633769669145.gif

    代码

    <com.google.android.material.slider.Slider
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:layout_gravity="center"
            android:valueTo="100f"
            android:valueFrom="0f"
            android:value="20f"
            app:haloColor="@color/mainColor"
            app:haloRadius="20dp"
            app:labelBehavior="withinBounds"
            app:thumbColor="@color/ff666666"
            app:thumbRadius="10dp"
            app:thumbElevation="10dp"
            app:trackColorActive="@color/mainColor"
            app:trackColorInactive="@color/ff666666"/>
    
        <com.google.android.material.slider.RangeSlider
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            app:values="@array/initial_slider_values"
            android:valueTo="100f"
            android:valueFrom="0f"
            app:labelBehavior="withinBounds"/>
        <com.google.android.material.slider.Slider
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:valueTo="100f"
            android:valueFrom="0f"
            android:stepSize="10"
            app:labelBehavior="withinBounds"/>
    

    总长度和当前长度代码

    android:valueTo="100f"
    android:valueFrom="0f"
    android:value="20f"
    

    拖动时出现的大圆提示

    app:haloColor="@color/mainColor"
    app:haloRadius="20dp"//如果不想要,就设置为0dp
    

    圆圈上面的数字提示框设置

    app:labelBehavior="withinBounds"
    

    他有floating、withinBounds、gone三种,gone肯定是不展示,经过我的测试设置floating在个别手机上面会有显示bug,看下图:


    1633770131231.gif

    lable没有消失,出现问题的手机是华为p10,小米10是好的。所以这里都用withinBounds模式。
    滑块的设置

    app:thumbColor="@color/ff666666"
    app:thumbRadius="10dp"//圆的半径
    app:thumbElevation="10dp"//悬浮阴影
    

    进度条背景颜色设置

    app:trackColorActive="@color/mainColor"//以拖动的区域
    app:trackColorInactive="@color/ff666666"//未覆盖的区域
    

    RangeSlider的话注意app:values="@array/initial_slider_values"

    <string-array name="initial_slider_values">
            <item>0</item>
            <item>100</item>
        </string-array>
    

    这样设置,默认从两端开始拖动
    步长设置

    android:stepSize="10"
    

    每10的数字打个点。

    ShapeableImageView

    Screenshot_20211009_171046_com.example.demo.jpg

    代码

    <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"
        tools:context=".materialViews.image.ShapeableImageViewActivity">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center_horizontal">
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"/>
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"
                app:shapeAppearance="@style/CircleStyle"/>
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"
                app:shapeAppearance="@style/CutStyle"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center_horizontal">
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"
                app:shapeAppearance="@style/RoundedStyle"/>
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"
                app:shapeAppearance="@style/CircleStyle"
                app:strokeColor="@android:color/holo_orange_light"
                app:strokeWidth="2dp"
                android:padding="1dp"/>
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:src="@mipmap/test"
                android:layout_marginTop="10dp"
                app:shapeAppearance="@style/RhombusStyle"/>
        </LinearLayout>
    </LinearLayout>
    
    <style name="RoundedStyle">
            <item name="cornerFamily">rounded</item>
            <item name="cornerSize">10dp</item>
    </style>
    
    <style name="CircleStyle">
            <item name="cornerFamily">rounded</item>
            <item name="cornerSize">50%</item>
    </style>
    
    <style name="CutStyle">
            <item name="cornerFamily">cut</item>
            <item name="cornerSize">10dp</item>
    </style>
    
    <!--ShapeableImageView 菱形 -->
    <style name="RhombusStyle">
            <item name="cornerFamily">cut</item>
            <item name="cornerSize">50%</item>
    </style>
    

    当然这是简单的使用
    主要注意cornerFamily,他有rounded和cut两种,如果需要圆角那就是rounded,如果需要多边形,那么需要cut。你可以把cornerFamily理解成设置这个属性控制图片的4个角,那么他肯定有单独设置某个角的功能

    <item name="cornerFamilyBottomRight"/>
    <item name="cornerFamilyBottomLeft"/>
    <item name="cornerFamilyTopLeft"/>
    <item name="cornerFamilyTopRight"/>
    

    然后cornerSize可以设置具体数字,也能百分比。当然我们可以单独设置摸一个角。

    <item name="cornerSizeBottomLeft"></item>
    <item name="cornerSizeBottomRight"></item>
    <item name="cornerSizeTopLeft"></item>
    <item name="cornerSizeTopRight"></item>
    

    相关文章

      网友评论

        本文标题:Android记录material包下的好工具(Slider、S

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