android 投票百分比功能
阿新 • • 發佈:2018-12-22
近來公司有個新功能就是投票功能,在網上找了一圈,沒看到怎麼完全適合的,自己和童鞋搞了個,在此記錄下。
UI是這樣的;
一開始打算用ProgressBar實現,做出來的效果不是完全符合需求有點小Bug,然後自定義了一個。
首先是drawable樣式left_blue_radius_shape.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#2AA7FF" /> <corners android:bottomLeftRadius="60dp" android:bottomRightRadius="0dp" android:topLeftRadius="60dp" android:topRightRadius="0dp" /> </shape>
left_radius_shape.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#FF9393" /> <corners android:bottomLeftRadius="60dp" android:bottomRightRadius="0dp" android:topLeftRadius="60dp" android:topRightRadius="0dp" /> </shape>
left_rectangle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF9393" />
</shape>
radius_shape.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white" /> <corners android:bottomLeftRadius="60dp" android:bottomRightRadius="60dp" android:topLeftRadius="60dp" android:topRightRadius="60dp" /> </shape>
right_radius_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#2AA7FF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="60dp"
android:topLeftRadius="0dp"
android:topRightRadius="60dp" />
</shape>
right_rectangle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#2AA7FF" />
</shape>
right_red_radius_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF9393" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="60dp"
android:topLeftRadius="0dp"
android:topRightRadius="60dp" />
</shape>
控制元件item,layout_vote_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/llContent"
android:layout_width="match_parent"
android:layout_height="@dimen/dp40"
android:layout_marginLeft="@dimen/dp10"
android:layout_marginRight="@dimen/dp10"
android:background="@android:color/white"
android:gravity="center"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvApproveOfTv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/left_radius_shape"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp40"
android:text="500"
android:textColor="@color/white"
android:textSize="12sp" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/dp5"
android:background="@drawable/radius_shape"
android:padding="@dimen/dp5"
android:src="@mipmap/bad" />
</FrameLayout>
<TextView
android:id="@+id/tvApproveOf"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/left_rectangle_shape" />
<TextView
android:id="@+id/tvOppose"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/right_rectangle_shape" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvOpposeTv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/right_radius_shape"
android:gravity="center_vertical|right"
android:paddingRight="@dimen/dp40"
android:text="500"
android:textColor="@color/white"
android:textSize="12sp" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="@dimen/dp5"
android:background="@drawable/radius_shape"
android:padding="@dimen/dp5"
android:src="@mipmap/good" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
自定義控制元件程式碼 VoteView.java;
package com.gx.widgetlibrary;
import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.support.annotation.Nullable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 功能:
*
* @author
* @time 2018/11/13
* @email
*/
public class VoteView extends LinearLayout {
private Context context;
private LinearLayout llContent;
private TextView tvApproveOfTv, tvApproveOf, tvOppose, tvOpposeTv;
public VoteView(Context context) {
super(context);
}
public VoteView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
this.context = context;
initView();
}
public VoteView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initView();
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public VoteView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
this.context = context;
initView();
}
private void initView() {
if (isInEditMode())
return;
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.layout_vote_item, this);
llContent = (LinearLayout) v.findViewById(R.id.llContent);
tvApproveOf = (TextView) v.findViewById(R.id.tvApproveOf);
tvOppose = (TextView) v.findViewById(R.id.tvOppose);
tvApproveOfTv = (TextView) v.findViewById(R.id.tvApproveOfTv);
tvOpposeTv = (TextView) v.findViewById(R.id.tvOpposeTv);
}
public void setWeightForView(float scaleApproveOf) {
tvApproveOf.setLayoutParams(new LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, scaleApproveOf));//設定贊成的權重
tvOppose.setLayoutParams(new LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1 - scaleApproveOf));//設定反對的權重
if (scaleApproveOf == 0) {
tvApproveOfTv.setBackgroundResource(R.drawable.left_blue_radius_shape);
tvOpposeTv.setBackgroundResource(R.drawable.right_radius_shape);
return;
}
if (scaleApproveOf == 1) {
tvApproveOfTv.setBackgroundResource(R.drawable.left_radius_shape);
tvOpposeTv.setBackgroundResource(R.drawable.right_red_radius_shape);
return;
}
tvApproveOfTv.setBackgroundResource(R.drawable.left_radius_shape);
tvOpposeTv.setBackgroundResource(R.drawable.right_radius_shape);
}
public void setApproveOf(String approveOfText) {
if (TextUtils.isEmpty(approveOfText)) return;
tvApproveOfTv.setText(approveOfText);
}
public void setOppose(String opposeText) {
if (TextUtils.isEmpty(opposeText)) return;
tvOpposeTv.setText(opposeText);
}
}
使用方法:
在佈局檔案中使用
<com.gx.widgetlibrary.VoteView
android:id="@+id/vv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
程式碼中設定比例:
vv_1.setApproveOf(30 + "");
vv_1.setOppose(70 + "");
vv_1.setWeightForView(0.3F);