Android 自定义View 代码复用

前言

在写程序的时候,我们很多时候士想着怎么去尽量的少写代码,那么代码的复用就显着尤为重要,在一个地方写了之后,其他地方也能够复用是更好的事情,那么今天我们就简单的介绍代码的复用。

那么我们就以一个登陆界面为例,来简单的演示代码的复用。

实例项目就是一个简单的登录和注册的界面,实现代码复用,修改的时候简单的修改布局就可以实现。

首先我们先创建一个继承LinearLayout为基类的View,名字我们命名为LoginView。

代码如下:

public class LoginView extends LinearLayout {
	private Context mContext;
	public LoginView(Context context) {
		this(context);
	}
	public LoginView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext= context;
		//...
	}
}

在上面的代码中我们定义一个mContext成员变量,在这边我们后面会使用到。

接下来创建主要的布局(login_view.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="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <EditText
        android:id="@+id/userName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="User name" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/loginButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Login" />

        <Button
            android:id="@+id/signupButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Sign Up" />
    </LinearLayout>
</LinearLayout>

布局就是上面的样子很简单,我们就不做过多的说明了。

那么接下来我们就把我们自己定义的这个LoginView作为控件使用到我们MainActivity的主布局(activity_main.xml)中去,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="60dp"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity"
    tools:showIn="@layout/activity_main">

    <com.zhjy.hxf.hzloginview.view.LoginView
        android:id="@+id/loginView"
        app:UserNameHint="yo bro"
        app:PasswordHint="hey wsp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.zhjy.hxf.hzloginview.view.LoginView>
</LinearLayout>

com.zhjy.hxf.hzloginview.view.LoginView就是这个View的全名称,同时我们给这个LoginView指定了id为loginView。在MainActivity的java文件中可以取到这个View:

mLoginView = (LoginView)findViewById(R.id.loginView);

这个时候可以run起来这个项目。but,这样又有什么卵用呢?点个按钮也没什么反应。是的,我们需要给这个组合控件添加代码。我们需要从布局文件中解析出这些单独的控件,EditText和Button。就像是在Activity中经常做的那样:

View view = LayoutInflater.from(mContext).inflate(R.layout.login_view, this, true);
EditText userName = (EditText)view.findViewById(R.id.userName);
EditText password = (EditText)view.findViewById(R.id.password);
Button loginButton =(Button)view.findViewById(R.id.loginButton);
        Button signupButton = (Button) view.findViewById(R.id.signupButton)

给按钮设置Click Listener。首先让按钮能有反应。那么需要一个OnClickListener。我们这里只有两个按钮,所以只要在类的级别设定出监听器就可以:

public class LoginView extends LinearLayout implements View.OnClickListener{

    private Context mContext;

    private OnLoginViewClickListener onLoginViewClickListener;

    public LoginView(Context context) {
        super(context);
    }

    public LoginView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init(attrs);
    }

    private void init(AttributeSet attrs) {

        View view = LayoutInflater.from(mContext).inflate(R.layout.login_view, this, true);
        EditText userName = (EditText) view.findViewById(R.id.userName);
        EditText password = (EditText) view.findViewById(R.id.password);
        Button loginButton = (Button) view.findViewById(R.id.loginButton);
        Button signupButton = (Button) view.findViewById(R.id.signupButton);
        loginButton.setOnClickListener(this);
        signupButton.setOnClickListener(this);
    }
@Override
	public void onClick(View v) {
		if (v.getId() == R.id.loginButton) {
			Toast.makeText(MainActivity.this, "Login", Toast.LENGTH_LONG).show();
		} else if (v.getId() == R.id.signupButton) {
			Toast.makeText(MainActivity.this, "Register", Toast.LENGTH_LONG).show();
		}
	}

现在运行一下就可以实现Toast的显示效果了。

以上代码是所有功能都在View中进行实现了,那么我们怎么去实现代码的复用呢,显然是不好的,我们得想办法在Activity去实现这个功能。

那么就定义一个接口,去实现这个功能,大概的过程是这样:

1. 控件中定义接口。
2. 在Activity的实现。
3. 在控件中使用activity的实现。

这里我们定义了接口 public interface OnLoginViewClickListener 还有这么一个方法 void loginViewButtonClicked(View v);

public class LoginView extends LinearLayout implements View.OnClickListener {
	private Context _context;
	//...
	@Override
	public void onClick(View v) {
		//...
	}
	public void setOnLoginViewClickListener(OnLoginViewClickListener loginViewClickListener) {
		//...
	}
	public interface OnLoginViewClickListener {
		void loginViewButtonClicked(View v);
	}
}

下面在activity中实现这个接口(这个在java里比在ObjC里简单多了好吗),那么我们就把所有的代码都贴出来。

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private LoginView mLoginView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        initView();
    }

    private void initView() {
        mLoginView = (LoginView)findViewById(R.id.loginView);

        /**
         * 然后拿到这边的接口方法
         */
        mLoginView.setOnLoginViewClickListener(new LoginView.OnLoginViewClickListener() {
            @Override
            public void loginViewButtonClicked(View v) {
                if (v.getId() == R.id.loginButton){
                    Toast.makeText(MainActivity.this, "Login", Toast.LENGTH_SHORT).show();
                }else if(v.getId() == R.id.signupButton){
                    Toast.makeText(MainActivity.this,"Register", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

LoginView.java

/**
 * @author :huangxianfeng on 2016/12/16.
 *         自定义LoginView实现组件代码复用
 */
public class LoginView extends LinearLayout implements View.OnClickListener {

    private Context mContext;

    private OnLoginViewClickListener onLoginViewClickListener;

    public LoginView(Context context) {
        super(context);
    }

    public LoginView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.login_view, this, true);
        EditText userName = (EditText) view.findViewById(R.id.userName);
        EditText password = (EditText) view.findViewById(R.id.password);
        Button loginButton = (Button) view.findViewById(R.id.loginButton);
        Button signupButton = (Button) view.findViewById(R.id.signupButton);
        //设置hint属性
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.LoginView);
        CharSequence userNameHint = typedArray.getText(R.styleable.LoginView_UserNameHint);
        CharSequence passwordHint = typedArray.getText(R.styleable.LoginView_PasswordHint);
        userName.setHint(userNameHint);
        password.setHint(passwordHint);
        loginButton.setOnClickListener(this);
        signupButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (onLoginViewClickListener != null) {
            onLoginViewClickListener.loginViewButtonClicked(v);
        }
    }

    public void setOnLoginViewClickListener(OnLoginViewClickListener loginViewClickListener) {
        onLoginViewClickListener = loginViewClickListener;
    }

    public interface OnLoginViewClickListener {
        void loginViewButtonClicked(View v);
    }
}

在上面的代码中还有一个自定义hint属性的代码,在values中定义一个attrs.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LoginView">
        <attr name="UserNameHint" format="string"/>
        <attr name="PasswordHint" format="string"/>
    </declare-styleable>
</resources>

就可以实现自定义属性。

以上就是所有的代码,有什么好的建议可以留言。
转载请注明出处:
【定陶黄公子】

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
效果开始前先做个热身( ˘•灬•˘ )自己实现比较容易,但是到了要出博客整理思路,总结要点的时候就挠头,不知云所以,所以最简单的还是 Read the fucking source code如果对安卓UI有兴趣的朋友可以加我好友互相探讨,这里有很多自定义view可以参考思路思路比较简单,整个view无非两样东西云雨滴这里又包含两部分动画,一部分是云的左右移动动画,一部分是雨滴移动动画 那我们这里可以自定义一些属性,如果对自定义属性还不太了解的同学,搜下百度哈<resources>     <declare-styleable name="RainyView">         <!--雨滴的颜色-->         <attr name="raindrop_color" format="color"></attr>         <!--左边云的颜色-->         <attr name="left_cloud_color" format="color"></attr>         <!--右边云的颜色-->         <attr name="right_cloud_color" format="color"></attr>         <!-可同时存在的雨滴的最大数量-->         <attr name="raindrop_max_number" format="integer"></attr>         <!--每个雨滴之间创建的时间间隔-->         <attr name="raindrop_creation_interval" format="integer"></attr>         <!--每个雨滴的最小长度-->         <attr name="raindrop_min_length" format="integer"></attr>         <!--每个雨滴的最大长度-->         <attr name="raindrop_max_length" format="integer"></attr>         <!--雨滴的大小-->         <attr name="raindrop_size" format="integer"></attr>         <!--雨滴的最小移动速度-->         <attr name="raindrop_min_speed" format="float"></attr>         <!--雨滴的最大移动速度-->         <attr name="raindrop_max_speed" format="float"></attr>         <!--雨滴的斜率-->         <attr name="raindrop_slope" format="float"></attr>     </declare-styleable> </resources>画云云怎么画?云的形状不可胜举,我这里只实现了一种简单的形状:那我们如何通过画笔将其画出来:1.首先,我们先画底部,底部是一个圆角的矩形,通过下面方法绘制添加圆角矩形path.addRoundRect(RectF rect, float rx, float ry, Direction dir) 2.在该圆角的矩形的基础上,再画两个圆,左边的为小圆,右边的为大圆,这样就产生了一个最简单的云的图形, 在设置了以下代码之后paint.setStyle(Paint.Style.FILL);云的效果如下:我们把这个云作为左边的云,那么右边的云怎么画?很简单,因为我们这里用path来装载了这个云的路径,通过以下方法,mComputeMatrix.preTranslate(rightCloudTranslateX, -calculateRect.height() * (1 - CLOUD_SCALE_RATIO) / 2); mComputeMatrix.postScale(CLOUD_SCALE_RATIO, CLOUD_SCALE_RATIO, rightCloudCenterX, leftCloudEndY); mLeftCloudPath.transform(mComputeMatrix, mRightCloudPath);将这个云的path移动,缩小,并将其路径转换到mRightCloudPath即可在onDraw()的时候,调用以下方法就可以描绘路径了canvas.drawPath()接下来我们来实现云的动画,我们由上面已经了解到:/**  * Transform the points in this path by matrix, and write the answer  * into dst. If dst is null, then the the original path is modified.  *  * @param matrix The matrix to apply to the path  * @param dst    The transformed path is written here. If dst is null,  *               then the the original path is modified  */ public void transform(Matrix matrix, Path dst) {     long dstNative = 0;     if (dst != null) {         dst.isSimplePath = false;         dstNative = dst.mNativePath;     }     nTransform(mNativePath, matrix.native_instance, dstNative); }该方法可以将一个path进行matrix转换,即矩阵转换,因此我们可以通过方法matrix.postTranslate来实现平移动画,即创建一个循环动画,通过postTranslate来设置动画值就可以了,这里左边的云在右边的云之上,因此先画右边的云。mComputeMatrix.reset(); mComputeMatrix.postTranslate((mMaxTranslationX / 2) * mRightCloudAnimatorValue, 0); mRightCloudPath.transform(mComputeMatrix, mComputePath); canvas.drawPath(mComputePath, mRightCloudPaint); mComputeMatrix.reset(); mComputeMatrix.postTranslate(mMaxTranslationX * mLeftCloudAnimatorValue, 0); mLeftCloudPath.transform(mComputeMatrix, mComputePath); canvas.drawPath(mComputePath, mLeftCloudPaint);画雨滴首先我们要知道一点是,所有的雨滴都是随机产生的,而产生的值,可以根据上面的自定义属性指定,也可以使用自定义的值,我们先定义一个雨滴类private class RainDrop{     float speedX;  //雨滴x轴移动速度     float speedY;   //雨滴y轴移动速度     float xLength; //雨滴的x轴长度     float yLength; //雨滴的y轴长度     float x;        //雨滴的x轴坐标     float y;        //雨滴的y轴坐标     float slope; //雨滴的斜率 }关于上面参数,这里画张图来示例:关于斜率 我这里开放了一个设置斜率的接口,代表雨滴的一个倾斜度,可以看到下图的雨滴都是倾斜的,就是通过斜率来设置这个倾斜度 斜率:表示一条直线(或曲线的切线)关于(横)坐标轴倾斜程度的量。它通常用直线(或曲线的切线)与(横)坐标轴夹角的正切,或两点的纵坐标之差与横坐标之差的比来表示。该直线的斜率为k=(y1-y2)/(x1-x2)我这里使用了固定的斜率,使所有的雨滴方向一致,如果想将其改为随机值的同学,可以下载源码自行修改。在创建雨滴对象的时候,以下步骤使我们需要做的:斜率赋值(我这里是指定的,因此不用计算随机斜率)计算x轴、y轴移动速度随机值计算雨滴长度随机值(同时计算x轴,y轴长度值)计算x,y坐标随机值(为了营造雨滴更好的出场效果,这里设置了y轴的起点坐标为y-雨滴y轴长度)创建雨滴对象后,我们有了想要的参数,我们可以canvas.drawLine来画雨滴canvas.drawLine(rainDrop.x, rainDrop.y,             rainDrop.slope > 0 ? rainDrop.x   rainDrop.xLength : rainDrop.x - rainDrop.xLength,             rainDrop.y   rainDrop.yLength,             mRainPaint);这里需要注意以下,为什么canvas.drawLine中的stopX参数要设置为rainDrop.slope > 0 ? rainDrop.x   rainDrop.xLength : rainDrop.x - rainDrop.xLength这是因为,我们的雨滴是一直往下移动即y是增加的,我们上面知道斜率公式为:k=(y1-y2)/(x1-x2)即y1-y2肯定是大于0的,因此当斜率小于0的时候,雨滴是这样的,即x1-x2 < 0 当斜率大于0的时候,雨滴是这样的,即x1-x2 > 0 雨滴动画,由于每一个雨滴对象参数已经定义,在进行动画的时候,只需要根据速度,设置x、y轴的下一个点的坐标就行了if (rainDrop.slope >= 0) {         rainDrop.x  = rainDrop.speedX;     }else{         rainDrop.x -= rainDrop.speedX;     } rainDrop.y  = rainDrop.speedY;优化我们知道,在频繁的创建雨滴的时候,如果每次都创建新对象的话, 可能会增加不必要的内存使用,而且很容易引起频繁的gc,甚至是内存抖动。因此这里我增加了一个回收功能//首先判断栈中是否存在回收的对象,若存在,则直接复用,若不存在,则创建一个新的对象 private RainDrop obtainRainDrop(){      if (mRecycler.isEmpty()){          return new RainDrop();      }      return mRecycler.pop();  } //回收到一个栈里面,若这个栈数量超过最大可显示数量,则pop private void recycle(RainDrop rainDrop){     if (rainDrop == null){         return;     }     if (mRecycler.size() >= mRainDropMaxNumber){         mRecycler.pop();     }     mRecycler.push(rainDrop); }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DT从零到壹

您的鼓励是我创作最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值