お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【Android】 画像を使わず縦の点線を引く

こんにちわ。pencoです。
今回は layout の xml に縦の点線を引く方法について書いていきたいと思います。
LinearLayout などのレイアウトのルートに使う(背景になる)要素に何か表示したいと思ったら、background に画像を設定するのが手っ取り早い手段ですよね。
でもそれだとリソースもメモリも食うので、xml でなんとかしたい!と思いやってみました。
 

今回の目標

 
今回の完成イメージはこんな感じです。
postNo23_1
 
状態を説明しますと、リストビューに後からビューを追加して、そのビューの左端に区切り線として縦の点線を引きたかったのです。この追加したビューの設定を説明していきます。
postNo23_2
 

設定

 
まず、追加したビューの xml から見ていきます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/dotted_line"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/checkmark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:src="@drawable/list_checkmark" />
    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:focusable="false"
        android:focusableInTouchMode="true" />

</LinearLayout>

 
ルートの LinearLayout の background に drawable フォルダの dotted_line.xml を指定してます。
 
 
では、肝心の dotted_line.xml の中身を見てみます。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="-2dp"
        android:left="0dp"
        android:right="-2dp"
        android:top="-2dp">
        
        <shape android:shape="rectangle" >
            <stroke
		        android:width="1dp"
		        android:color="#ffffff"
		        android:dashWidth="2dp"
		        android:dashGap="2dp" />
        </shape>
    </item>
</layer-list>

 
layer-list は画像などをレイヤーとして重ねて表現でき、一つ以上の item を含みます。
今回は shape で四角く点線を引いて、余分な三辺をオフセットで外側にずらして見えないようにすることで、一辺の縦線を表現しています。
 
android:shape=”rectangle” で形状を四角形に指定、
stroke タグで枠線の形状を指定します。
android:dashWidth は点線のサイズ、android:dashGap は点線の間隔を指定する属性です。

item タグで指定しているのは、各端からのオフセットの値です。
端からのオフセットなので、プラスの値を指定すると、shape で描いた四角形が内側に、マイナスの値を指定すると外側にずれていきます。
 
そのため、残したい辺のオフセットは 0dp にしておき、余分な辺のオフセットは点線の幅よりも大きいマイナスの値を指定することで、外側にずれ、見えなくなります。
 
 
これで完成です。
こちらを参考にさせて頂きました。
shapeで上下に線を描く
 
 
ではでは。

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00