Button(按钮)与ImageButton(图像按钮)
Button普通按钮和ImageButton图像按钮;其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到Button上!我们实际开发中对于Button的,无非是对按钮的几个状态做相应的操作,比如:按钮按下的时候用一种颜色,弹起又一种颜色,或者按钮不可用的时候一种颜色这样!上述实现无非是通过StateListDrawable这种Drawable资源来实现,即编写一个drawable的资源文件.
1、实现按钮的按下效果:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/ic_course_bg_fen"/>
<item android:state_enabled="false" android:drawable="@drawable/ic_course_bg_pressed"/>
<item android:drawable="@drawable/ic_course_bg_cheng"/>
</selector>
布局文件:activity_main.xml
<Button android:id="@+id/btnOne" android:layout_width="match_parent" android:layout_height="64dp" android:background="@drawable/btn_bg1" android:text="按钮"/> <Button android:id="@+id/btnTwo" android:layout_width="match_parent" android:layout_height="64dp" android:text="按钮不可用"/>
MainActivity.java:
public class MainActivity extends Activity {
private Button btnOne,btnTwo;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnOne = (Button) findViewById(R.id.btnOne);
btnTwo = (Button) findViewById(R.id.btnTwo);
btnTwo.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(btnTwo.getText().toString().equals("按钮不可用")){
btnOne.setEnabled(false);
btnTwo.setText("按钮可用");
}else{
btnOne.setEnabled(true);
btnTwo.setText("按钮不可用");
}
}
});
}
}
代码效果:
2、实现Material Design水波效果的Button
实现代码:
自定义ImageButton:MyButton.java
import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.os.SystemClock; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.ViewConfiguration; import android.widget.ImageButton; /** * Created by Administrator on 2017/6/16. */ public class MyButton extends ImageButton { private static final int INVALIDATE_DURATION = 15; private static int DIFFUSE_GAP = 10; private static int TAP_TIMEOUT; private int viewWidth, viewHeight; private int pointX, pointY; private int maxRadio; private int shaderRadio; private Paint bottomPaint, colorPaint; private boolean isPushButton; private int eventX, eventY; private long downTime = 0; public MyButton(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); TAP_TIMEOUT = ViewConfiguration.getLongPressTimeout(); } private void initPaint() { colorPaint = new Paint(); bottomPaint = new Paint(); colorPaint.setColor(getResources().getColor(R.color.reveal_color)); bottomPaint.setColor(getResources().getColor(R.color.bottom_color)); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (downTime == 0) downTime = SystemClock.elapsedRealtime(); eventX = (int) event.getX(); eventY = (int) event.getY(); countMaxRadio(); isPushButton = true; postInvalidateDelayed(INVALIDATE_DURATION); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: if(SystemClock.elapsedRealtime() - downTime < TAP_TIMEOUT){ DIFFUSE_GAP = 30; postInvalidate(); }else{ clearData(); } break; } return super.onTouchEvent(event); } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); if(!isPushButton) return; canvas.drawRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight, bottomPaint); canvas.save(); canvas.clipRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight); canvas.drawCircle(eventX, eventY, shaderRadio, colorPaint); canvas.restore(); if(shaderRadio < maxRadio){ postInvalidateDelayed(INVALIDATE_DURATION, pointX, pointY, pointX + viewWidth, pointY + viewHeight); shaderRadio += DIFFUSE_GAP; }else{ clearData(); } } /* * 计算最大半径的方法 * */ private void countMaxRadio() { if (viewWidth > viewHeight) { if (eventX < viewWidth / 2) { maxRadio = viewWidth - eventX; } else { maxRadio = viewWidth / 2 + eventX; } } else { if (eventY < viewHeight / 2) { maxRadio = viewHeight - eventY; } else { maxRadio = viewHeight / 2 + eventY; } } } /* * 重置数据的方法 * */ private void clearData(){ downTime = 0; DIFFUSE_GAP = 10; isPushButton = false; shaderRadio = 0; postInvalidate(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); this.viewWidth = w; this.viewHeight = h; } }
<code> <p><b>color.xml:</b></p> <pre> <?xml version="1.0" encoding="utf-8"?> <resources> <color name="reveal_color">#FFFFFF</color> <color name="bottom_color">#3086E4</color> <color name="bottom_bg">#40BAF8</color> </resources>
activity_main.xml:
<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="match_parent" tools:context=".MainActivity"> <demo.com.jay.buttondemo.MyButton android:id="@+id/myBtn" android:layout_width="match_parent" android:layout_height="64dp" android:src="@mipmap/ic_tur_icon" android:background="@color/bottom_bg" android:scaleType="center"/> </RelativeLayout>代码效果: