Button(ボタン)とImageButton(画像ボタン)


このセクションの紹介:

今日は、Android の基本コントロールの 2 つのボタン コントロール、Button 通常のボタンと ImageButton 画像ボタンを紹介します。 実は、ImageButton と Button の使い方は基本的に似ており、それに関連する画像については、後の ImageView と同じなので、ここでは説明します。 Button についてのみ説明します。また、Button は TextView のサブクラスであるため、TextView 上の多くのプロパティは Button にも適用できます。 優れた!実際の開発では、Button は、次のようなボタンのいくつかの状態に対して対応する操作を実行するだけです。 ボタンが使用できない場合は、1 つの色を使用するか、別の色をポップアップ表示するか、このような 1 色を使用します。上記の実装は、StateListDrawableのDrawableリソースを実現する、つまりDrawableリソースファイルを書くだけです。 このセクションを直接開始してください~


1. StateListDrawable の概要:

StateListDrawable は、さまざまな状態に応じてさまざまな画像効果とキー ノードを設定できます。これを簡単に実現するには、ボタンの blackground 属性をドローアブル リソースに設定する必要があります。 ボタンの色や背景が異なるボタン!

設定できる属性:

  • drawable

    : 参照されるDrawableビットマップ。コンポーネントの通常の状態を示すために前面に置くことができます~

  • state_focused

    : フォーカスを取得するかどうか

  • state_window_focused
  • : ウィンドウフォーカスを取得するかどうか

  • state_enabled
  • : コントロールが利用可能かどうか

  • state_checkable
  • : コントロールがチェックできるかどうか、例: checkbox

  • state_checked
  • :コントロールがチェックされているかどうか

  • state_selected
  • : スクロールホイールがある状況でコントロールが選択されているかどうか

  • state_pressed
  • : コントロールが押されているかどうか

  • state_active
  • : かどうかコントロールがアクティブです。例:slidingTab

  • state_single
  • : コントロールに複数のサブコントロールが含まれる場合、サブコントロールが 1 つだけ表示されるかどうかを決定します

  • state_first
  • : コントロールに複数のサブコントロールが含まれる場合、最初のサブコントロールが表示状態であるかどうかを判断します

    state_middle
  • : コントロールに複数の子コントロールが含まれる場合、真ん中の子コントロールが表示状態であるかどうかを判断します
  • state_last
  • :コントロールに複数の子コントロールが含まれている場合は、最後の子コントロールが表示状態であるかどうかを確認します
  • 2. ボタンを押す効果を実現するには:
通常、ボタンのストレッチを避けるために、最初に 3 つの画像の背景を準備します。と変形では、ボタンの描画可能ファイルとして.9.png を使用します。 まず
オペレーション レンダリングを見てみましょう:

1.gif コードの実装:

<?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"
アンドロイド:layout_width="match_parent"
android:layout_height="64dp"
android:background="../style/images/btn_bg1"
android:text="按钮"/>


<ボタン
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 onCreate(Bundle savedInstance State) {
super.onCreate(savedInstanceState);
setContentView(R. layout.activity_main);
btnOne = (ボタン) findViewById(R.id.btnOne);
btnTwo = (ボタン) findViewById(R.id.btnTwo);
btnTwo.setOnClickListener(new OnClickListener() {
@Override
パブリックvoid onClick(View v) {
if(btnTwo.getText().toString().equals("按钮不可用")){
btnOne.setEnabled(false);
btnTwo.setText("按钮可用");
}else{
btnOne.setEnabled(true);
btnTwo.setText("按钮不可用");
}
}
});
}

}

3. カラー値を使用して丸いボタンを描画します

多くの場合、必ずしもアーティストがいるわけではありませんし、PS の使用方法や画像の破壊方法がわからない、または怠け者でありません。自分たちで絵を作りたくない。 この時点で、ボタンの背景として使用する独自のコードを作成できます。次に、丸い角をカスタマイズします。 ボタンの背景~これには、ShapeDrawable という別の描画可能なリソースが関係します。それぞれについては後ほど詳しく説明します。 drawable~ ここでの使用方法を知っていれば、EditText の Background プロパティを変更するだけで済みます。ここには、Drawable リソースのみが掲載されています。

まずレンダリングを見てみましょう:

2.gif

bbuton_danger_rounded.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"><shape>
<solid android:color="@color/bbutton_danger_pressed" />
<ストローク android:width="1dp" android:color="@ color/bbutton_danger_edge" />
<corners android:radius="@dimen/bbuton_rounded_corner_radius"/>
</shape></item>


<item android:state_enabled="false"> <形状>
<solid android:color="@color/bbutton_danger_disabled" />
<ストローク android:width="1dp" android:color="@color/bbutton_danger_disabled_edge" />
<コーナー アンドロイド:radius="@dimen/bbuton_rounded_corner_radius"/>
</shape></item>


<item><shape>
<solid android :color="@color/bbutton_danger" /> ;
<ストローク android:width="1dp" android:color="@color/bbutton_danger_edge" />
<corners android:radius="@dimen/bbuton_rounded_corner_radius"/>
</shape& gt;<; /item>


</selector>

color.xml:


<?xml version="1.0" encoding="utf-8"?>
<リソース>
<color name="bbutton_danger_pressed">#ffd2322d< ;/color>
<color name="bbutton_danger_edge">#ffd43f3a</color>
<color name="bbutton_danger_disabled">#a5d9534f</color>
<color name="bbutton_d angel_disabled_edge"># a5d43f3a</color>
<color name="bbutton_danger">#ffd9534f</color>
<color name="text_font_white">#FFFFFF</color>
</resources>


dimens.xml:

<dimen name="bbuton_rounded_corner_radius">5dp</dimen>

4. マテリアル デザインの水の波効果を実装するボタン

Android 携帯電話のシステムが 5.0 以降の場合は、次のボタン クリック効果に精通していると思います:

実装レンダリング:

3.gif

早い方が押した後の効果、遅い方が長押し後の効果です!

実装ロジック:

1. ImageButtonを継承します。もちろんButtonやViewに変更することもできます。ここではImageButtonを継承する前に真ん中にタートルを置きたいと思います

2.まず、2つのペイント(ブラシ)を作成します。 ) オブジェクト、1 つは底部の背景色を描画し、もう 1 つはリップル拡散を描画します

3。 次に、最大半径を計算し、最大半径と等しくなるまで開始半径を時々増加させ、その後、州!

追記: 一般的なコアについては、学習しただけでは馴染みがないかもしれませんが、それについては後で説明します。 自分で行うこともできます。コメントは非常に詳細です~

実装コード:

カスタマイズされたImageButton:MyButton.java


パッケージdemo.com.jay.buttondemo;

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;

/**
* 2015/7/16 0016 に coder-pig によって 作成されました。
 */
public class MyButton extends ImageButton {


private static Final int INVALIDATE_DURATION = 15; //各更新の間隔
private static int DIFFUSE_GAP = 10; //クリックと長押しの時間を決定します

/幅と高さを制御します
private int pointX, pointY; int shaderRadio;使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用する 使用するto, to /Brush: 背景と水の波紋
private boolean isPushButton; // ボタンが押されたかどうかを記録します

private inteventX,eventY;    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 (ダウンタイム == 0) ダウンタイム = 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( ) - ダウンタイム < TAP_TIMEOUT){
DIFFUSE_GAP = 30;
postInvalidate();
super.disp; atchDraw(canvas);
if(!isPushButton) return; ボタンが押されていない場合は return;アウトアウトアウトスルーアウトアウトアウトスルーMBアウトMBMBアウトMBアウトMB out out out out out out out off to me ‐ ‐ ‐throughout, + viewHeight,bottomPaint);
Canvas.save();
//拡散円形の背景を描画します
Canvas.clipRect(pointX, pointY, pointX + viewWidth, pointY + viewHeight);
Canvas.drawCircle(event X,eventY, shaderRadio, ColorPaint);
Canvas.restore ();
// 半径が最大半径に等しくなるまで





{ 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;
}
}
}

<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="../style/images/bottom_bg"
android:scaleType="center"/> ;

</RelativeLayout>
    /*
* データを重畳する方法
* */
private void clearData(){
downTime = 0;
DIFFUSE_GAP = 10;
isPushButton = false;
shaderRadio = 0;
postInvalidate();
}

@オーバーライド
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"?>
<リソース>
<color name="reveal_color">#FFFFFF</color>
<color name="bottom_color">#3086E4</color>
<color name= "bottom_bg">#40BAF8</color>
</resources>

activity_main.xml:

ソースコード下ダウンロード(AS工程の哦):ButtonDemo.zip


本节小结:

本节给大家介绍了ボタン在实际开发的使用法,可能性有一部西我们还没学,这里 知道下即可,後面学到自然会深入讲解,谢谢~