序文
AndroidのユーザーエクスペリエンスはiOSほど良くないと言う人はまだたくさんいますが、近年、多くのAndroid開発者の努力により、AndroidはiOSとユーザーに失われない強みを持っています。経験も増えています。
今日あなたと共有したいのは、絹のようなコントロールQ爆弾効果です。あなたの研究と仕事に刺激を与え、助けたいと思います。
あまりナンセンスな話をしないでください。レンダリングに移動して、どれほど絹のようで、どれほど優れているかを感じてください。
このQ爆弾のアニメーションと華やかな色変換は、市場に出回っている通常のスイッチコントロールとは大きく異なります。一つずつ分解して、0から1まで実装していきましょう。
デザインのアイデア
Androidシステムが提供するSwitchButonは、メタリアルデザインスタイルを非常によく反映していますが、コケティッシュではありません。コントロールのカラーデザインに2つの相反する対照的な色を使用して、明るい色の背景ページに配置したときに、コントロールが直接目を刺すような効果を実現できるようにしたいと考えています。人を捕まえ、コケティッシュに、そして自慢してください。ページ全体が適切に一致している限り、コントロールは「外部的に純粋で内部的に純粋」である必要があります。わずかにぼやけたハローは、すでに明るい色をさらに魅力的にすることができます。
デザインのスケーラビリティを高めるために、さまざまなスタイルを反映する目的を達成するために色を変更することができます。
実現する方法
一般に、コントロールの外観は非常にコケティッシュですが、相互作用ロジックは比較的単純です。スイッチを拡張する方法を理解する必要がないため、システムスイッチからの継承を検討しないでください。したがって、Viewから直接継承できます。ロジックコントロール全体がonTouchEventに実装され、色、サイズなどの構成可能な各属性が宣言されます。
UI描画
ご覧のとおり、グラフは2つの部分で構成されています。1つは前面の青い角の丸い長方形（インジケーター）で、もう1つは背面の長い赤い長方形（背景バー）です。これら2つのグラフは別々に描画できます。onDrawパーツのコードは次のとおりです。
- 背景バーを描画します
。bkgRectは描画される長方形の領域の範囲を表し、高さと幅はコントロールの長さと幅です。bkgBarW、bkgBarHは丸みを帯びた長方形であるため、背景バーの長さと幅です。描画するキャンバスのdrawRoundRectメソッド、およびbkgBarPaintは背景バーの色を制御します
//画背景条
RectF bkgRect = new RectF((width - bkgBarW) / 2f, height / 2 - (bkgBarH / 2), (width - bkgBarW) / 2f + bkgBarW, height / 2 + (bkgBarH / 2));
canvas.drawRoundRect(bkgRect, bkgBarH / 4, bkgBarH / 4, bkgBarPaint);
- 前景の丸みを帯びた長方形を描画します：
同様に、indicatorRectは描画される丸みを帯びた長方形の領域であり、indicatorWとindicatorHはインジケーターの幅と高さであり、indicatorXとindicatorYはインジケーターの中心座標です。アニメーターと組み合わせて動的に計算されます最後に、canvasのdrawRoundRectを呼び出して描画します
//画指示器
RectF indicatorRect = new RectF(
indicatorX,
indicatorY,
indicatorW + indicatorX,
(height - indicatorH) / 2 + indicatorH
);
canvas.drawRoundRect(indicatorRect, indicatorH / 6, indicatorH / 6, indicatorPaint);
- アイコンまたはテキストの描画：
この部分は、テキストまたはアイコンの座標を計算した後に描画できます。テキストを描画する場合は、テキストのベースライン位置を計算して、視覚的に中央に配置できるようにする必要があることに注意してください。インジケーター
//画图标
int baseLineY = (int) (indicatorRect.centerY() - textTop / 2 - textBottom / 2);//基线中间点的y轴计算公式
if (status == false) {
canvas.drawText("♂", indicatorRect.centerX(), baseLineY, textPaint);
} else {
canvas.drawText("♀", indicatorRect.centerX(), baseLineY, textPaint);
}
- アニメーションの実装
制御を容易にするために、2つのAnimatorSet、つまりanimOnSetとanimOffSetを定義します。animOnSetはスイッチセレクターがオンのときのアニメーションのコレクションを表し、animOffSetはスイッチセレクターがオフのときのアニメーションのコレクションを表します。弾性効果を設定するには、BounceInterpolatorに設定します。
animatorOn = ValueAnimator.ofFloat(indicatorStartX, indicatorEndX);
animatorOn.setDuration(500);
animatorOn.setInterpolator(new BounceInterpolator());
animatorOn.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
indicatorX = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animOnSet = new AnimatorSet();
animOnSet.playTogether(animatorOn, animatorColorOn);
animatorOff = ValueAnimator.ofFloat(indicatorEndX, indicatorStartX);
animatorOff.setDuration(500);
animatorOff.setInterpolator(new BounceInterpolator());
animatorOff.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
indicatorX = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animOffSet = new AnimatorSet();
animOffSet.playTogether(animatorColorOff, animatorOff);
- 1億点のディテールを追加します。
よく見ると、インジケーターが同じ色でシェーディングされ、かすかな影が霞のようにかすかになっていることがわかります。ここでは、デザインされた影の背景画像を使用して画像をカットできますが、コントロールの汎用性を高めるために、トリッキーな方法が採用されています。ビットマップを処理することにより、インジケーターの色が変わると、描かれる影の色も変わります。コードは次のとおりです。bmShdowは描画される影の絵です。
bmShadow = BitmapFactory.decodeResource(getResources(), R.drawable.img_shadow_rect_blue);
//sex_blue为配置的指示器为“开”状态时的颜色，int值
bmShadow = BitmapUtils.replacePixelColor(bmShadow, sex_blue);
よく見ると、インジケーターアニメーションの実行中に、インジケーターの色も段階的に変化していることがわかります。色を変更するための動的な計算操作があり、アニメーターは引き続き計算に使用され、indicatorPaintはインジケーターの色を制御します
animatorColorOn = new ValueAnimator();
animatorColorOn.setIntValues(sex_blue, sex_red);
animatorColorOn.setEvaluator(new ArgbEvaluator());
animatorColorOn.setDuration(500);
animatorColorOn.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
indicatorPaint.setColor(color);
}
});
animatorColorOff = new ValueAnimator();
animatorColorOff.setIntValues(sex_red, sex_blue);
animatorColorOff.setEvaluator(new ArgbEvaluator());
animatorColorOff.setDuration(500);
animatorColorOff.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
indicatorPaint.setColor(color);
}
});
やっと
Androidの学習は長い道のりであり、あらゆる場所で学ぶ価値があります。
その中でも、制御の設計または開発のポイントは、あらゆる場所で「トップダウン」のアイデアを具体化しています。実際の仕事では色々なニーズに出くわしますが、慌てる必要はありません！これらの3つのポイントを達成するために、落ち着いて要件を明確にし、ロジックを明確にし、詳細を磨く限り、制御の設計または開発の問題のほとんどは簡単に解決できます。
今回コンパイルしたAndroidの最も重要で人気のある学習方向資料をGitHubに配置しました：https：//github.com/xieyuliang/Android-P7（表示するにはここをクリック）、Self-内にはさまざまな方向がありますプログラミングルートの学習、質問の収集/対面のインタビュー、および一連の技術記事。
みんなで勉強して話し合うことを歓迎します。