网站建设 需要ae吗,唐山网站建设方案咨询,温州做网站建设多少钱,html菜单改为wordpress效果图 序言
在移动应用开发中#xff0c;显示数据的方式多种多样#xff0c;直观的图形展示常常能带给用户更好的体验。本文将介绍如何使用Flutter创建一个自定义三角形纬度评分控件#xff0c;该控件可以通过动画展示评分的变化#xff0c;让应用界面更加生动。
实现思…效果图 序言
在移动应用开发中显示数据的方式多种多样直观的图形展示常常能带给用户更好的体验。本文将介绍如何使用Flutter创建一个自定义三角形纬度评分控件该控件可以通过动画展示评分的变化让应用界面更加生动。
实现思路及步骤
定义控件属性首先需要定义控件的基本属性如宽度、高度、最大评分以及每个顶点的评分值。自定义绘制使用自定义View绘制三角形和评分三角形并在顶点处绘制空心圆点。实现动画效果使用属性动画ValueAnimator来控制评分动画使每个顶点的评分从0逐渐增加到对应的评分值。
代码实现
定义自定义属性和布局文件
在res/values/attrs.xml中定义自定义属性 declare-styleable nameTriangleRatingAnimViewattr namemaxRating formatinteger /attr nameupRating formatinteger /attr nameleftRating formatinteger /attr namerightRating formatinteger /attr namestrokeColor formatcolor /attr namestrokeWidth formatdimension /attr nameratingStrokeColor formatcolor /attr nameratingStrokeWidth formatdimension //declare-styleable创建自定义View类
首先创建一个自定义View类TriangleRatingAnimView用于绘制三角形和动画效果。
package com.yxlh.androidxy.demo.ui.ratingimport android.animation.ValueAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.util.TypedValue
import android.view.View
import androidx.core.content.withStyledAttributes
import androidx.core.graphics.ColorUtils
import androidx.interpolator.view.animation.LinearOutSlowInInterpolator
import com.yxlh.androidxy.Rfun Context.dpToPx(dp: Float): Float {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resources.displayMetrics)
}/*** 三角形评分控件* https://github.com/yixiaolunhui/AndroidXY*/
class TriangleRatingAnimView JvmOverloads constructor(context: Context,attrs: AttributeSet? null,defStyleAttr: Int 0,
) : View(context, attrs, defStyleAttr) {var maxRating: Int 5set(value) {field valueinvalidate()}var upRating: Int 0set(value) {field valueanimateRating()}var leftRating: Int 0set(value) {field valueanimateRating()}var rightRating: Int 0set(value) {field valueanimateRating()}private var strokeColor: Int Color.GRAYprivate var strokeWidth: Float context.dpToPx(1.5f)private var ratingStrokeColor: Int Color.REDprivate var ratingStrokeWidth: Float context.dpToPx(2.5f)private var animatedUpRating 0private var animatedLeftRating 0private var animatedRightRating 0private val paint Paint(Paint.ANTI_ALIAS_FLAG).apply {style Paint.Style.STROKEcolor strokeColorstrokeWidth thisTriangleRatingAnimView.strokeWidth}private val outerPaint Paint(Paint.ANTI_ALIAS_FLAG).apply {style Paint.Style.STROKEcolor ratingStrokeColorstrokeWidth thisTriangleRatingAnimView.ratingStrokeWidth}private val fillPaint Paint(Paint.ANTI_ALIAS_FLAG).apply {style Paint.Style.FILLcolor ColorUtils.setAlphaComponent(ratingStrokeColor, (0.3 * 255).toInt())}private val circlePaint Paint(Paint.ANTI_ALIAS_FLAG).apply {style Paint.Style.STROKEcolor ratingStrokeColorstrokeWidth context.dpToPx(1.5f)}private val circleFillPaint Paint(Paint.ANTI_ALIAS_FLAG).apply {style Paint.Style.FILLcolor Color.WHITE}init {context.withStyledAttributes(attrs, R.styleable.TriangleRatingAnimView) {maxRating getInt(R.styleable.TriangleRatingAnimView_maxRating, 5)upRating getInt(R.styleable.TriangleRatingAnimView_upRating, 0)leftRating getInt(R.styleable.TriangleRatingAnimView_leftRating, 0)rightRating getInt(R.styleable.TriangleRatingAnimView_rightRating, 0)strokeColor getColor(R.styleable.TriangleRatingAnimView_strokeColor, Color.GRAY)strokeWidth context.dpToPx(getDimension(R.styleable.TriangleRatingAnimView_strokeWidth, 2f))ratingStrokeColor getColor(R.styleable.TriangleRatingAnimView_ratingStrokeColor, Color.RED)ratingStrokeWidth context.dpToPx(getDimension(R.styleable.TriangleRatingAnimView_ratingStrokeWidth, 4f))}}private fun animateRating() {val animator ValueAnimator.ofFloat(0f, 1f).apply {duration 300interpolator LinearOutSlowInInterpolator()addUpdateListener { animation -val animatedValue animation.animatedValue as FloatanimatedUpRating (upRating * animatedValue).toInt()animatedLeftRating (leftRating * animatedValue).toInt()animatedRightRating (rightRating * animatedValue).toInt()invalidate()}}animator.start()}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)val width measuredWidth.toFloat()val height measuredHeight.toFloat()val circleRadius context.dpToPx(5f)val padding circleRadius context.dpToPx(2f)val p1 width / 2 to paddingval p2 padding to height - paddingval p3 width - padding to height - padding// 绘制外部三角形val path Path().apply {moveTo(p1.first, p1.second)lineTo(p2.first, p2.second)lineTo(p3.first, p3.second)close()}canvas.drawPath(path, paint)val centroidX (p1.first p2.first p3.first) / 3val centroidY (p1.second p2.second p3.second) / 3// 绘制顶点到重心的连线canvas.drawLine(p1.first, p1.second, centroidX, centroidY, paint)canvas.drawLine(p2.first, p2.second, centroidX, centroidY, paint)canvas.drawLine(p3.first, p3.second, centroidX, centroidY, paint)val dynamicP1 centroidX (p1.first - centroidX) * (animatedUpRating / maxRating.toFloat()) to centroidY (p1.second - centroidY) * (animatedUpRating / maxRating.toFloat())val dynamicP2 centroidX (p2.first - centroidX) * (animatedLeftRating / maxRating.toFloat()) to centroidY (p2.second - centroidY) * (animatedLeftRating / maxRating.toFloat())val dynamicP3 centroidX (p3.first - centroidX) * (animatedRightRating / maxRating.toFloat()) to centroidY (p3.second - centroidY) * (animatedRightRating / maxRating.toFloat())// 绘制内部动态三角形val ratingPath Path().apply {moveTo(dynamicP1.first, dynamicP1.second)lineTo(dynamicP2.first, dynamicP2.second)lineTo(dynamicP3.first, dynamicP3.second)close()}canvas.drawPath(ratingPath, outerPaint)canvas.drawPath(ratingPath, fillPaint)// 绘制动态点上的空心圆canvas.drawCircle(dynamicP1.first, dynamicP1.second, circleRadius, circlePaint)canvas.drawCircle(dynamicP1.first, dynamicP1.second, circleRadius - context.dpToPx(1.5f), circleFillPaint)canvas.drawCircle(dynamicP2.first, dynamicP2.second, circleRadius, circlePaint)canvas.drawCircle(dynamicP2.first, dynamicP2.second, circleRadius - context.dpToPx(1.5f), circleFillPaint)canvas.drawCircle(dynamicP3.first, dynamicP3.second, circleRadius, circlePaint)canvas.drawCircle(dynamicP3.first, dynamicP3.second, circleRadius - context.dpToPx(1.5f), circleFillPaint)}
}
定义Activity界面xml文件
在res/layout/activity_rating.xml中使用自定义View
androidx.appcompat.widget.LinearLayoutCompat xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_gravitycenter_horizontalandroid:gravitycenterandroid:orientationverticalandroidx.constraintlayout.widget.ConstraintLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_gravitycenterTextViewandroid:idid/upTextandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text时间管理android:textColorcolor/blackandroid:textSize13spapp:layout_constraintLeft_toLeftOfparentapp:layout_constraintRight_toRightOfparentapp:layout_constraintTop_toTopOfparent /com.yxlh.androidxy.demo.ui.rating.TriangleRatingAnimViewandroid:idid/triangleRatingAnimViewandroid:layout_width300dpandroid:layout_height200dpandroid:layout_centerInParenttrueapp:layout_constraintLeft_toLeftOfparentapp:layout_constraintRight_toRightOfparentapp:layout_constraintTop_toBottomOfid/upTextapp:leftRating3app:maxRating10app:ratingStrokeColorandroid:color/holo_red_darkapp:ratingStrokeWidth4dpapp:rightRating8app:strokeColorandroid:color/darker_grayapp:strokeWidth3dpapp:upRating5 /TextViewandroid:idid/leftTextandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text成本控制android:textColorcolor/blackandroid:textSize13spapp:layout_constraintTop_toBottomOfid/triangleRatingAnimViewapp:layout_constraintLeft_toLeftOfid/triangleRatingAnimView/TextViewandroid:idid/rightTextandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text质量保证android:textColorcolor/blackandroid:textSize13spapp:layout_constraintTop_toBottomOfid/triangleRatingAnimViewapp:layout_constraintRight_toRightOfid/triangleRatingAnimView//androidx.constraintlayout.widget.ConstraintLayoutButtonandroid:idid/randomizeButtonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_belowid/triangleRatingAnimViewandroid:layout_centerHorizontaltrueandroid:layout_marginTop20dpandroid:text更改数据 //androidx.appcompat.widget.LinearLayoutCompat
定义RatingActivity
package com.yxlh.androidxy.demo.ui.ratingimport android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.yxlh.androidxy.databinding.ActivityRatingBinding
import kotlin.random.Randomclass RatingActivity : AppCompatActivity() {private var binding: ActivityRatingBinding? nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding ActivityRatingBinding.inflate(layoutInflater)setContentView(binding?.root)binding?.randomizeButton?.setOnClickListener {randomizeRatings()}}private fun randomizeRatings() {val random Random(System.currentTimeMillis())val maxRating 5 random.nextInt(6)val upRating 1 random.nextInt(maxRating)val leftRating 1 random.nextInt(maxRating)val rightRating 1 random.nextInt(maxRating)binding?.triangleRatingAnimView?.apply {this.maxRating maxRatingthis.upRating upRatingthis.leftRating leftRatingthis.rightRating rightRatinginvalidate()}}
}
通过以上步骤和代码我们可以创建一个带动画效果的三角形纬度评分控件使评分展示更加生动和直观。
详情可见github.com/yixiaolunhui/AndroidXY
