Androidペイント(一):shapeで欲しい図形を描きましょう!
12219 ワード
目次前言 shape描画 矩形 楕円 線 リング shapeでSeekBar を描画最後の 前言
UIデザイナーがいないときや、簡単に効果を見たいときは、shapeで素早く描くのが素敵!官方ドキュメント
shape描画
全部で4種類ある
長方形
一つずつ見てみると、まず矩形です.グラデーションgradientは色を上書きします.純粋な色がほしい場合は、色値を直接設定すればいいです.solidのcolorを設定します. ちなみにsolidにはcolorのパラメータが1つしかない. グラデーションgradientもsolidも書かないと中空になります. グラデーションgradientのtypeパラメータは3つあります: linearリニアグラデーション sweep走査グラデーション radial放射グラデーション、パラメータgradientRadius を組み合わせる必要があるフィレットcornersはradiusを直接設定してもよいし、1つずつ指定してもよい. のストロークストロークではdashGapを書かないとdashWidthは実線、dashWidthは破線幅、dashGapは破線間隔を表す. 内間距離paddingとサイズsizeは言わないで、みんな知っています.
だえんグラデーションは最大3色まで設定可能で、意味は一目でわかります: startColor centerColor endColor 一般的な楕円は、実心の小さな円点を描くために使用される.
線
線は簡単です.
リング
最後にループを見ると、いくつかの特有のプロパティがあります. thicknessRatioとはリング厚のパーセンテージである、デフォルトでは9である、例えばここで幅は200 dp、thicknessRatioは100、リング厚は200 dp/100=2 dpである.もちろん、thicknessで厚さを直接設定することができます. innerRadiusRatioは内輪のパーセンテージである、デフォルトでは3であり、幅/パーセンテージで得られる値が内輪の半径であることを意味する.同様にinnerRadiusで直接設定することができる.
shapeでSeekBarを描画する
私はとてもきれいなカスタム進捗バーがたくさんあることを知っていますが、私はこのSeekBarを書いてshapeの使用を補充したいので、非常に少ないコードでカスタム進捗バーを実現します.効果図を見てみましょう. を実現
次のポイントプロパティを簡単に説明します. maxは進捗バーの最大値を表す. maxHeight、minHeightは進捗バーの幅を設定することができます.私は少し広いのが好きです. thumb設定スライダは、画像でもshapeでも書く設定でもよい. progressDrawableは進捗バーの外観を表し、画像でもshapeでも書く設定でもよい.
スライダと進捗バーの外観の具体的なコードを見てみると、進捗バーは背景、進捗、第2の進捗を設定することができる.スライダなら、どんな絵を描いてもいいです.
JAva部分ではHandlerインスタンスpostDelayedメソッドでプログレスバーを走らせると効果が見られる.ここでは50 msを設定メッセージを送信.
最後に
私个人はやはりshapeで描くことに偏って、ピクチャーが理不尽になるとメモリがあふれて、形が変わって、解像度に注意しなければならなくて、本当に心が大きいです.いいねを覚えておくのが好きだよ.陰で私に注目してもいいよ.
UIデザイナーがいないときや、簡単に効果を見たいときは、shapeで素早く描くのが素敵!官方ドキュメント
shape描画
全部で4種類ある
長方形
一つずつ見てみると、まず矩形です.
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:shape="rectangle">
"160dp"
android:height="80dp" />
"8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
"45"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent"
android:type="linear" />
"0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="40dp"
android:topRightRadius="40dp" />
"2dp"
android:color="#666"
android:dashGap="4dp"
android:dashWidth="4dp" />
だえん
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:shape="oval">
"160dp"
android:height="80dp" />
"8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
"@color/colorPrimary"
android:endColor="@color/colorPrimaryDark"
android:startColor="@color/colorAccent"
android:type="sweep" />
"1dp"
android:color="#333" />
線
線は簡単です.
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:shape="line">
"8dp"
android:color="@color/colorPrimary"
android:dashGap="8dp"
android:dashWidth="6dp" />
リング
最後にループを見ると、いくつかの特有のプロパティがあります.
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="100"
android:useLevel="false">
"200dp"
android:height="200dp" />
"0"
android:centerColor="@color/colorPrimaryDark"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent"
android:type="sweep" />
"1dp"
android:color="#777"
android:dashGap="4dp"
android:dashWidth="4dp" />
shapeでSeekBarを描画する
私はとてもきれいなカスタム進捗バーがたくさんあることを知っていますが、私はこのSeekBarを書いてshapeの使用を補充したいので、非常に少ないコードでカスタム進捗バーを実現します.効果図を見てみましょう.
"match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/eight_dp"
android:max="200"
android:maxHeight="@dimen/eight_dp"
android:minHeight="@dimen/eight_dp"
android:progressDrawable="@drawable/layout_progress"
android:thumb="@drawable/shape_circle" />
次のポイントプロパティを簡単に説明します.
スライダと進捗バーの外観の具体的なコードを見てみると、進捗バーは背景、進捗、第2の進捗を設定することができる.スライダなら、どんな絵を描いてもいいです.
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android">
- "@android:id/background">
"@dimen/four_dp" />
"@android:color/darker_gray" />
- "@android:id/secondaryProgress">
"@dimen/four_dp" />
"@color/colorAccent" />
- "@android:id/progress">
"@dimen/four_dp" />
"@android:color/holo_blue_light" />
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:shape="oval">
"@android:color/holo_blue_light" />
"@dimen/one_dp"
android:color="@android:color/holo_blue_light" />
"@dimen/sixteen_dp"
android:height="@dimen/sixteen_dp" />
JAva部分ではHandlerインスタンスpostDelayedメソッドでプログレスバーを走らせると効果が見られる.ここでは50 msを設定メッセージを送信.
findViewById(R.id.cv_start).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mRunnable == null) {
mRunnable = new MyRunnable();
mHandler.postDelayed(mRunnable, 0);
}
}
});
findViewById(R.id.cv_stop).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mHandler.removeCallbacks(mRunnable);
mRunnable = null;
}
});
private class MyRunnable implements Runnable {
@Override
public void run() {
int progress = mSbTest.getProgress();
mTvProgress.setText(String.valueOf(progress));
mSbTest.setProgress(++progress);
mSbTest.setSecondaryProgress(progress + 10);
int progress2 = mSbTest2.getProgress();
mTvProgress2.setText(String.valueOf(progress2));
mSbTest2.setProgress(++progress2);
mSbTest2.setSecondaryProgress(progress2 + 20);
mHandler.postDelayed(this, 50);
}
}
最後に
私个人はやはりshapeで描くことに偏って、ピクチャーが理不尽になるとメモリがあふれて、形が変わって、解像度に注意しなければならなくて、本当に心が大きいです.いいねを覚えておくのが好きだよ.陰で私に注目してもいいよ.