经常会看到QQ上面有一个 消息和电话 的顶部面板，这个空间是IOS7的分段控制，android中没有这个控件，
今天在威哥的微信公众号中成功gank到这个自定义控件的实现，下面跟着尝试一波。
首先是定义文字的颜色，在res/color下新建segment_text_color_selector.xml文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#2ccbf2" android:state_selected="true"/>
<item android:color="#a7a7a7" android:state_selected="false"/>
</selector>
然后在res/drawable下新建segment_left_background.xml和segment_right_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#cfcece"/>
<corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp"
android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#cfcece"/>
<corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
android:bottomRightRadius="5dp" android:topRightRadius="5dp"/>
</shape>
</item>
</selector>
Ok，资源文件已备好，下面开始自定义segmentView，由于要用到weight属性，我们继承LinearLayout，使用两个textview。
package com.example.nanchen.segmentviewdemo;
import android.content.Context;
import android.content.res.ColorStateList;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 自定义SegmentView 使用两个TextView
* Created by 南尘 on 2016/7/11.
*/
public class SegmentView extends LinearLayout {
private TextView tv_left;
private TextView tv_right;
private onSegmentViewClickListener segmentViewClickListener;
/**
* 这是代码加载UI必须重写的方法
* @param context
*/
public SegmentView(Context context) {
super(context);
initView();
}
/**
* 这是在xml布局使用必须重写的方法
* @param context
* @param attrs
*/
public SegmentView(Context context, AttributeSet attrs){
super(context,attrs);
initView();
}
private void initView() {
tv_left = new TextView(getContext());
tv_right = new TextView(getContext());
//设置TextView的布局宽高并设置weight属性都为1
tv_left.setLayoutParams(new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT,1));;
tv_right.setLayoutParams(new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT,1));;
//初始化默认文字
tv_left.setText("消息");
tv_right.setText("电话");
//实现不同的按钮状态，不同的颜色
ColorStateList csl = getResources().getColorStateList(R.color.segment_text_color_selector);
tv_left.setTextColor(csl);
tv_right.setTextColor(csl);
//设置内容居中
tv_left.setGravity(Gravity.CENTER);
tv_right.setGravity(Gravity.CENTER);
//设置TextView的内边距
tv_left.setPadding(5,6,5,6);
tv_right.setPadding(5,6,5,6);
//设置文字大小
setSegmentTextSize(14);
//设置背景资源
tv_left.setBackgroundResource(R.drawable.segment_left_background);
tv_right.setBackgroundResource(R.drawable.segment_right_background);
//默认左侧为选中状态
tv_left.setSelected(true);
//加入TextView
this.removeAllViews();
this.addView(tv_left);
this.addView(tv_right);
this.invalidate();
tv_left.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (tv_left.isSelected()){
return;
}
tv_left.setSelected(true);
tv_right.setSelected(false);
if(segmentViewClickListener!=null){
segmentViewClickListener.onSegmentViewClick(tv_left,0);
}
}
});
tv_right.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (tv_right.isSelected()){
return;
}
tv_left.setSelected(false);
tv_right.setSelected(true);
if(segmentViewClickListener!=null){
segmentViewClickListener.onSegmentViewClick(tv_right,1);
}
}
});
}
/**
* 设置字体大小
* @param dp
*/
private void setSegmentTextSize(int dp){
tv_left.setTextSize(TypedValue.COMPLEX_UNIT_DIP,dp);
tv_right.setTextSize(TypedValue.COMPLEX_UNIT_DIP,dp);
}
/**
* 定义一个接口用于接收点击事件
*/
public interface onSegmentViewClickListener{
public void onSegmentViewClick(View view,int position);
}
/**
* 手动设置选中的状态
*
* @param i
*/
public void setSelect(int i) {
if (i == 0) {
tv_left.setSelected(true);
tv_right.setSelected(false);
} else {
tv_left.setSelected(false);
tv_right.setSelected(true);
}
}
public void setOnSegmentViewClickListener(
onSegmentViewClickListener segmentViewClickListener) {
this.segmentViewClickListener = segmentViewClickListener;
}
/**
* 设置控件显示的文字
*
* @param text
* @param position
*/
public void setSegmentText(CharSequence text, int position) {
if (position == 0) {
tv_left.setText(text);
}
if (position == 1) {
tv_right.setText(text);
}
}
}
在XML文件中的引用：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#03fbc5"
tools:context="com.example.nanchen.segmentviewdemo.MainActivity">
<com.example.nanchen.segmentviewdemo.SegmentView
android:orientation="horizontal"
android:id="@+id/main_segment"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</com.example.nanchen.segmentviewdemo.SegmentView>
</RelativeLayout>
最后是我们的Activity
package com.example.nanchen.segmentviewdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private SegmentView segmentView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
segmentView = (SegmentView) findViewById(R.id.main_segment);
segmentView.setOnSegmentViewClickListener(new SegmentView.onSegmentViewClickListener() {
@Override
public void onSegmentViewClick(View view, int position) {
switch (position){
case 0:
Toast.makeText(MainActivity.this, "点击了消息"+position,Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(MainActivity.this, "点击了电话"+position,Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
});
}
}
其实这些东西都只是为了重温自定义View，理清其中必不可少的步骤，自定义View上就简单多了。期待大家一起交流学习吧。
时间： 2024-10-06 23:02:52