标签:
方案来自慕课网,因水平和记忆力有限,将方案记录于此。
移动开发一个好的应用离不开漂亮的UI,漂亮的UI离不开充满想象力的UI组件。在此记录一个自定义UI组件的案例,也是学习自定义UI的开始。本例是satellite-menu的一种实现。satellite-menu效果如下图:
我们需要认识这个组件。这个组件相较于其他组件有两个特别的属性。一个是组件的位置,另一个是组件Item与Button的距离。这两个属性,我们希望开发者能自定。
第一步,我们在value文件夹下,建立一个xml文件attr.xml,将这两个属性,和这个自定义组件的命名放进去:
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="position"> <enum name="left_top" value="0"/> <enum name="left_bottom" value="1"/> <enum name="right_top" value="2"/> <enum name="right_bottom" value="3"/> </attr> <attr name="radius" format="dimension"/> <declare-styleable name="CustomButton"> <attr name="position"/> <attr name="radius"/> </declare-styleable> </resources>
其中,position是Button的位置,这是个枚举型的属性,Button只能存在于屏幕的四角。radius是一个尺寸型的属性,它表示了组件Item与Button的距离。declare-styleable用于给自定义组件添加自定义属性。上面一段就是给declare-styleable添加了两个自定义属性。
第二步,建立新的CustomButton类,并完成初始化。
import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.view.ViewGroup; import com.memeda.lsy.mycustombutton.R; /** * Created by Administrator on 2015/4/15. */ public class CustomButton extends ViewGroup { private static final int POS_LEFT_TOP = 0; private static final int POS_LEFT_BOTTOM = 1; private static final int POS_RIGHT_TOP = 2; private static final int POS_RIGHT_BOTTOM = 3; private Position mPosition=Position.RIGHT_BOTTOM; private int mRadius = 100; private Status mStatus = Status.CLOSE; private OnItemClickListener mOnItemClickListener; /** * 菜单的主按钮 */ private View mCButton; public void setmOnItemClickListener(OnItemClickListener mOnItemClickListener) { this.mOnItemClickListener = mOnItemClickListener; } public void setmPosition(Position mPosition) { this.mPosition = mPosition; } public void setmRadius(int mRadius) { this.mRadius = mRadius; } /** * 菜单位置枚举类 */ public enum Position{ LEFT_TOP ,LEFT_BOTTOM ,RIGHT_TOP ,RIGHT_BOTTOM } /** * 菜单开关枚举类 */ public enum Status{ OPEN,CLOSE } /** * 点击子菜单的回调接口 */ public interface OnItemClickListener{ void onClick(View view , int position); } public CustomButton(Context context) { this(context , null); } public CustomButton(Context context, AttributeSet attrs) { this(context,attrs,0); } public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //获取mRadius的初始值100dp mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,100,getResources().getDisplayMetrics()); //获取组件参数数组 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomButton,defStyleAttr,0); //获取Button位置 int pos = a.getInt(R.styleable.CustomButton_position,POS_RIGHT_BOTTOM); switch (pos){ case POS_LEFT_TOP: mPosition = Position.LEFT_TOP; break; case POS_LEFT_BOTTOM: mPosition = Position.LEFT_BOTTOM; break; case POS_RIGHT_TOP: mPosition = Position.RIGHT_TOP; break; case POS_RIGHT_BOTTOM: mPosition = Position.RIGHT_BOTTOM; break; } //获取Item与Button的距离 mRadius = (int) a.getDimension(R.styleable.CustomButton_radius ,mRadius); a.recycle(); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { } }
至此,自定义组件的属性和读出属性的方法已经实现,我们可以在布局文件中使用它。
xmlns:custombutton = "http://schemas.android.com/apk/res-auto"
<com.memeda.lsy.mycustombutton.view.CustomButton android:layout_width="match_parent" android:layout_height="match_parent" custombutton:position="right_bottom" custombutton:radius="120dp"> </com.memeda.lsy.mycustombutton.view.CustomButton>
以上,下一节,将开始绘制自定义组件的外观。
标签:
原文地址:http://www.cnblogs.com/fishbone-lsy/p/4429143.html