Android初级教程 - Shape的详细介绍与使用

Shape一般只有在无UI，或者只是简单基础图的修改时候才会用到，建议有UI就直接找UI切图，当然一些情况下还是需要自己做的，所有紧急掌握以下吧。

使用方式：

1.在res - drawable - 创建文件（一般为Shape开头）

2.文件内部shape为最外层标签，可设置当前的shape形状，有圆形，长方形，环形，线形（删除线）

3.在需要的地方可以设置@drawable/shape效果，如ImageView的src属性，TextView的BackGround

注意：

1.内部6种子条目标签，要熟悉掌握，长方形同时可实现圆化

2.Effect中的第三，第四种效果TextView设置的背景均是高度被限制的原因

Effect （项目主要使用AllEffectActivity的代码）：



此Demo下载链接：

http://download.csdn.net/download/qq_20451879/9920140

Shape_xml（重要）：

shape_oval.xml (圆形) :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">

<!--内部填充-->
<solid android:color="@color/colorAccent" />

<!--描边(这里小数是有效的,但是会导致显示不全)-->
<stroke
android:width="1dp"
android:color="@color/colorPrimary" />

<!--大小-->
<size
android:width="5dp"
android:height="5dp" />

<!--边角度圆化（圆角，大多用处长方形,因本身是圆形，这里不设置）-->
<corners

/>

<padding

/>

</shape>

shape_rectangle.xml（长方形）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false">

<!--内部填充-->
<solid android:color="@color/CustomColor5" />

<!--描边(这里小数是有效的,但是会导致显示不全)-->
<stroke
android:width="1dp"
android:color="@color/CustomColor7" />

<!--大小-->
<size
android:width="15dp"
android:height="5dp" />

<!--边角度圆化（圆角）-->
<corners android:radius="5dp" />

<!--俩边的内边距-->
<padding
android:left="10dp"
android:right="10dp" />

<!--渐变色 angle（角度方向，90度为上下渐变，0为左右渐变），-->
<gradient
android:angle="45"
android:centerColor="@color/CustomColor2"
android:endColor="@color/CustomColor3"
android:startColor="@color/CustomColor1" />

</shape>

shape_ring.xml （环形）：

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
>

<!--内部填充-->
<solid android:color="@color/colorAccent"/>

<!--描边-->
<stroke
android:width="0.1dp"
android:color="@color/colorPrimary"
/>

<!--大小-->
<size
android:width="5dp"
android:height="5dp"
/>

<!--边角度圆化（圆角）-->
<corners

/>

<padding

/>

<gradient

/>

</shape>

shape_line.xml （删除线）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
android:useLevel="false">

<!--内部填充-->
<solid android:color="@color/colorAccent" />

<!--描边-->
<stroke
android:width="1dp"
android:color="@color/colorPrimary" />

<!--大小-->
<size
android:width="5dp"
android:height="5dp" />

<!--边角度圆化（圆角）-->
<corners android:radius="5dp" />

<padding

/>

<gradient
android:angle="45"
android:centerColor="@color/CustomColor2"
android:endColor="@color/CustomColor3"
android:startColor="@color/CustomColor1" />

</shape>

MainActivity ：

package com.yl.shape.shapedemo;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private TextView mOver;
private TextView mRectangle;
private TextView mLine;
private TextView mRing;
private TextView mAll;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mOver = (TextView) findViewById(R.id.over);
mRectangle = (TextView) findViewById(R.id.rectangle);
mLine = (TextView) findViewById(R.id.line);
mRing = (TextView) findViewById(R.id.ring);
mAll = (TextView)findViewById(R.id.all);

mOver.setOnClickListener(this);
mRectangle.setOnClickListener(this);
mLine.setOnClickListener(this);
mRing.setOnClickListener(this);
mAll.setOnClickListener(this);
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.over:
startActivity(new Intent(this,OverActivity.class));
break;

case R.id.rectangle:
startActivity(new Intent(this,RectangleActivity.class));
break;

case R.id.line:
startActivity(new Intent(this,LineActivity.class));
break;

case R.id.ring:
startActivity(new Intent(this,RingActivity.class));
break;

case R.id.all:
startActivity(new Intent(this,AllEffectActivity.class));
break;
}
}
}

MainActivity Xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.yl.shape.shapedemo.MainActivity">

<TextView
android:id="@+id/over"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:text="Shape_圆形" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#64CDFF" />

<TextView
android:id="@+id/rectangle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:text="Shape_长方形圆角化" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#64CDFF" />

<TextView
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:text="Shape_线条" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#64CDFF" />

<TextView
android:id="@+id/ring"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:text="Shape_Ring形状" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#64CDFF" />

<TextView
android:id="@+id/all"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="5dp"
android:text="项目适用Shape效果" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#64CDFF" />

</LinearLayout>

AllEffectActivity （项目实用）：

package com.yl.shape.shapedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class AllEffectActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_all_effect);
}
}

AllEffectActivity Xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_all_effect"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.yl.shape.shapedemo.AllEffectActivity">

<TextView
android:layout_marginTop="40dp"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:text="圆形"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/shape_oval"
/>

<TextView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:text="长方形"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/shape_rectangle"
/>

<TextView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:text="删除线"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/shape_line"
/>

<TextView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:text="环形"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/shape_ring"
/>
</LinearLayout>

OverActivity(圆形)：

package com.yl.shape.shapedemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

/**
* Created by YongLiu on 2017/8/3.
*/

public class OverActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_over);
}
}

OverActivity Xml ：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/shape_oval"
/>
</RelativeLayout>

RectangleActivity(长方形) ：

package com.yl.shape.shapedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class RectangleActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rectangle);
}
}

RectangleActivity Xml ：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_rectangle"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yl.shape.shapedemo.RectangleActivity">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/shape_rectangle"
/>
</RelativeLayout>

RingActivity（环形） ：

package com.yl.shape.shapedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class RingActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ring);
}
}

RingActivity Xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_ring"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.yl.shape.shapedemo.RingActivity">

<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="ImageView设置的src"
android:gravity="center"
/>

<ImageView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:src="@drawable/shape_ring"
/>

<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="Text设置的背景Ring"
android:gravity="center"
/>

<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="@drawable/shape_ring"
/>
</LinearLayout>

LineActivity （线形）：

package com.yl.shape.shapedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class LineActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_line);
}
}

LineActivity Xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.yl.shape.shapedemo.LineActivity">

<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="Text设置的背景Ring"
android:gravity="center"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_centerInParent="true"
android:background="@drawable/shape_line"
android:id="@+id/textView" />

<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="ImageView设置的src"
android:gravity="center"
/>

<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="@drawable/shape_line"
/>
</LinearLayout>