Android 圆形手表ListView圆弧滚动

Android 圆形手表ListView圆弧滚动

智能手表发展迅速，很多开发的兄弟姐妹们都用过，分享一下圆盘手表的圆弧滚动ListView源代码，先上原理图：圆圈指的圆形屏幕的每个应用所处的位置，让个每个ListView的Item沿圆形表盘滚动，其实就是数学公式，圆上任一点计算公式。通过计算圆上任一点的X坐标，计算出Item需要向右平移的距离，从而实现ListView的每一个Item沿圆盘表盘边缘滚动。

JAVA代码：自定义ListView的Item布局控件

package video.xforms.www.util;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.LinearLayout;

import video.xforms.www.AppContext;

/**
 * @Created by 2022/12/26.
 * @author 尹雪峰
 */

public class ListViewRound extends LinearLayout {
    
    
    private int h = 0;

    public ListViewRound(Context context, AttributeSet attrs) {
    
    
        super(context, attrs);
    }

    public void setParentHeight(int height) {
    
    
        h = height;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
    
    
        canvas.save();
        int top 	= getTop();
        float trans = onTranslate(top, h);
        Matrix m 	= canvas.getMatrix();
        //m.preTranslate(getWidth() / 8,   0);
        m.postTranslate(trans , 0);
        canvas.concat(m);
        super.dispatchDraw(canvas);
        canvas.restore();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
    
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

	//重点：计算Item 偏移量的函数
    private float onTranslate(int top,int h){
    
    
        float result = 0f;
        //检查屏幕是否是圆的
        if(!AppContext.getIsRound()){
    
    //(可以注释这个判断)
            int radius = getScreenWidth() / 2 - 62; //屏幕的半径 - Item上需要向左平移的部分
            if(top <= h/2f){
    
     //左边半圆的上半部分
                result = (float) Math.abs(radius - Math.sqrt( Math.pow(radius, 2) - Math.pow(radius - top, 2)));
            }else if(top > h/2f){
    
    //左边半圆的下半部分
                result = (float) Math.abs(radius - Math.sqrt( Math.pow(radius, 2) - Math.pow(top - radius, 2)) );
            }
        }
        return result;
    }

    private int getScreenWidth() {
    
    
        WindowManager manager   = (WindowManager) AppContext.getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm       = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(dm);
        return dm.widthPixels;
    }

}

XML(ListView的Item XML样式)

<?xml version="1.0" encoding="utf-8"?>
<video.xforms.www.util.ListViewRound
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout
        android:id="@+id/video_views"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:padding="12dp"
        android:layout_height="match_parent">
        
        <ImageView
            android:id="@+id/video_img"
            android:background="@drawable/i1"
            android:layout_width="80dp"
            android:layout_height="80dp" />

        <LinearLayout
            android:paddingLeft="12dp"
            android:orientation="vertical"
            android:layout_gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/video_name"
                android:textSize="26dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/video_size"
                android:textSize="22dp"
                android:layout_marginTop="6dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>
        
    </LinearLayout>

</video.xforms.www.util.ListViewRound>