Androidアプリでborder(枠線)を表示する方法2つ
※開発環境としてAndroid Studioを使用しています。
背景色をBorder(枠線)にする方法
Viewを2つ重ねてPaddingでずらす
背景色が違うViewを2つ重ねて親のView(下のView)にpaddingを設けることで枠線を作れます。
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="3dp"
android:background="#FFFF00FF"
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:background="#FFFFFFFF"
android:textSize="20sp" />
</LinearLayout>
LinearLayoutの中にTextViewを設置しています。
LinearLayoutに設定されているbackgroundの色がBorder(枠線)の色になり、TextViewに設定されているbackgroundの色がBorder(枠線)内部の背景色になります。
さらにLinearLayoutにpaddingを設けることで、LinearLayoutの中に余白ができ、背景色がBorder(枠線)のように表示されます。
この方法は実装が簡単ですが、Border(枠線)を凝ったデザインにすることはできません。
drawableにレイアウトを作成する方法
別に作成したレイアウトファイルを適用する
res/drawableにレイアウトファイルを作成します。
今回はsample_border.xmlを作成しました。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#FFFF00FF"
android:width="3dp"
/>
</shape>
shapeタグを使うことで図形を描くことができます。
shapeタグのshape属性に設定できる図形の種類は以下のようなものがあります。
| rectangle | 四角形(長方形) |
|---|---|
| oval | 楕円形 |
| line | 直線 |
| ring | 円形 |
今回はシンプルなBorder(枠線)を作成するのでrectangle(四角形)を指定しています。
strokeタグは線の色、太さ、スタイルなどを指定できるタグです。
レイアウトファイルを作成したらViewのbackgroundにdrawable/sample_borderを指定することで作成したsample_border.xmlのレイアウトが適用されます。
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:background="@drawable/sample_border"
android:textSize="20sp"
android:layout_margin="10dp"/>
この設定では中の文字とBorder(枠線)が重なってしまっているので内部の余白を調整する必要があります。
Border(枠線)内部の余白を調整したい場合
Border(枠線)内部の余白を調整したい場合はsample_border.xmlを以下のようにします。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#FFFF00FF"
android:width="3dp"
/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
paddingタグを追加して上下左右それぞれの余白を設定します。
これで中の文字とBorder(枠線)が重ならなくなりました。
点線を描きたい場合
strokeタグには以下のようなものを設定できます。
| width | 線の太さ |
|---|---|
| color | 線の色 |
| dashWidth | 点の長さ |
| dashGap | 点の間隔 |
dashWidthとdashGapを指定することで点線を表現できます。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#FFFF00FF"
android:width="3dp"
android:dashWidth="5dp"
android:dashGap="3dp"
/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
上記のようにdashWidthとdashGapを設定した場合、点が5dpの長さで、点と点の間隔が3dpの線になります。
Border(枠線)の角を丸くしたい場合
角を丸くしたい場合はcornersタグを使用します。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#FFFF00FF"
android:width="3dp"
/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
<corners
android:radius="10dp"/>
</shape>
cornersタグのradius属性で丸みの強度を指定します。
また、radiusは別々に指定することもでき、それぞれの角の丸みに違いを持たせることもできます。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#FFFF00FF"
android:width="3dp"
/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"/>
</shape>
| topLeftRadius | 左上の丸み |
|---|---|
| topRgihtRadius | 右上の丸み |
| bottomLeftRadius | 左下の丸み |
| bottomRightRadius | 右下の丸み |
投稿されたコメント一覧