Androidペイント(一):shapeで欲しい図形を描きましょう!

12219 ワード

目次
  • 前言
  • shape描画
  • 矩形
  • 楕円
  • リング
  • shapeでSeekBar
  • を描画
  • 最後の
  • 前言
    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" />
    
    
  • グラデーションgradientは色を上書きします.純粋な色がほしい場合は、色値を直接設定すればいいです.solidのcolorを設定します.
  • ちなみにsolidにはcolorのパラメータが1つしかない.
  • グラデーションgradientもsolidも書かないと中空になります.
  • グラデーションgradientのtypeパラメータは3つあります:
  • linearリニアグラデーション
  • sweep走査グラデーション
  • radial放射グラデーション、パラメータgradientRadius
  • を組み合わせる必要がある
  • フィレットcornersはradiusを直接設定してもよいし、1つずつ指定してもよい.
  • のストロークストロークではdashGapを書かないとdashWidthは実線、dashWidthは破線幅、dashGapは破線間隔を表す.
  • 内間距離paddingとサイズsizeは言わないで、みんな知っています.

  • だえん
    "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" />
    
    
  • グラデーションは最大3色まで設定可能で、意味は一目でわかります:
  • startColor
  • centerColor
  • endColor
  • 一般的な楕円は、実心の小さな円点を描くために使用される.


  • 線は簡単です.
    "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" />
    
    
  • thicknessRatioとはリング厚のパーセンテージである、デフォルトでは9である、例えばここで幅は200 dp、thicknessRatioは100、リング厚は200 dp/100=2 dpである.もちろん、thicknessで厚さを直接設定することができます.
  • innerRadiusRatioは内輪のパーセンテージである、デフォルトでは3であり、幅/パーセンテージで得られる値が内輪の半径であることを意味する.同様にinnerRadiusで直接設定することができる.

  • 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" />
    

    次のポイントプロパティを簡単に説明します.
  • maxは進捗バーの最大値を表す.
  • maxHeight、minHeightは進捗バーの幅を設定することができます.私は少し広いのが好きです.
  • thumb設定スライダは、画像でもshapeでも書く設定でもよい.
  • progressDrawableは進捗バーの外観を表し、画像でもshapeでも書く設定でもよい.

  • スライダと進捗バーの外観の具体的なコードを見てみると、進捗バーは背景、進捗、第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で描くことに偏って、ピクチャーが理不尽になるとメモリがあふれて、形が変わって、解像度に注意しなければならなくて、本当に心が大きいです.いいねを覚えておくのが好きだよ.陰で私に注目してもいいよ.