望而生畏之自定义View
2016-06-30 本文已影响1134人
刘小帅
社会就是这样，你又不能改变社会，只能适应。
本篇文章作者会不断更新，小伙伴可以持续鼓励支持。不支持就停更，就是这么傲娇。github同步代码https://github.com/liulingfeng/CustomView
对于很多Android开发者而言，自定义view简直就是噩梦。想想都觉得好难，但自定义view又是高级进阶的必经之路。下面就我所知道的来讲一下自定义view吧，废话不多说，打卡上车。我将自定义view分为以下三类：
- 组合控件--代码复用
- 继承已有控件或ViewGroup--功能扩展
- 纯自定义，继承View
组合控件
并不需要我们自己去绘制视图上显示的内容，而只是用系统原生的控件就好了，但我们可以将几个系统原生的控件组合到一起，这样创建出的控件就被称为组合控件。我们不生成控件，我们只是控件的搬运工。下面我就来创建一个公共的头部。
<pre>```<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="This is Title"
android:textSize="18sp"
android:textColor="@android:color/white"
android:gravity="center"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/iv_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="@mipmap/back"
android:layout_marginLeft="8dp"
/>
</RelativeLayout>
头部布局
</pre>
###### 在这里分享一个工具tools，在上面的布局中你可以发现它的身影。我给Textview设置的是 tools:text，而不是 android:text。这样设置的好处是这个文字只会在预览中看到，在正式运行到手机上是不会看到的。这个工具在ListView中特别好用，可以在ListView中设置item预览样式。
<pre>
```public class HeadView extends RelativeLayout implements View.OnClickListener{
private TextView tv_head;
private ImageView iv_back;
private Context mContext;
public HeadView(Context context) { this(context,null); }
public HeadView(Context context, AttributeSet attrs) {this(context, attrs,0);}
public HeadView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
mContext = context;
//第一个参数:布局的资源id 第二个参数:填充的根视图 第三个参数是否将载入的视图绑定到根视图中
LayoutInflater.from(context).inflate(R.layout.layout_head,this,true);
tv_head = (TextView)findViewById(R.id.tv_head);
iv_back = (ImageView) findViewById(R.id.iv_back);
iv_back.setOnClickListener(this);
}
public void setTitle(String headTv){
tv_head.setText(headTv);
}
@Override
public void onClick(View view) {
if(view == iv_back){
((Activity)mContext).finish();
}
}
}```
自定义的头部
</pre>
*我这边简单的来说一下这里面三个构造方法的使用场景。第一种是在java代码中直接创建时使用；第二种是在xml定义时使用，但不引用style设置样式；第三种用脚趾头想都知道是在引用style设置样式时使用。我这边一股脑儿的把所有构造方法都放在第三种中处理，这是一种较为简便的写法。*
</p>
这个自定义组合控件的用法我就不详细说了，只需要像其他布局一样<类的完整地址></类的完整地址>
###### 好了姿势对了，接下来我再来奉献一个常用的组合控件--可删除的搜索框
<pre>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/searchbar_width"
android:layout_height="@dimen/searchbar_height"
android:layout_marginTop="16dp"
android:background="@drawable/searchbar_bg"
<ImageView
android:id="@+id/delete"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@mipmap/close"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:visibility="invisible"
/>
<View
android:id="@+id/divider"
android:layout_width="1dp"
android:layout_height="24dp"
android:background="@color/colorAccent"
android:layout_toLeftOf="@id/delete"
android:layout_marginRight="6dp"
android:layout_centerVertical="true"
/>
<EditText
android:id="@+id/input"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@id/divider"
android:paddingLeft="12dp"
android:background="@null"
android:lines="1"
/>
</RelativeLayout>
搜索框布局
</pre>
###### 我这里的外边框用的是shape，而不是图片。至于为什么用shape，各位看官可以看我的另一票文章<http://www.jianshu.com/p/73317378d18c>。不知道如何写的同学可以咨询我。
<pre>
public class SearchBar extends LinearLayout implements View.OnClickListener,TextWatcher{
private ImageView delete;
private EditText input;
public SearchBar(Context context) {this(context,null);}
public SearchBar(Context context, AttributeSet attrs) {this(context, attrs,0);}
public SearchBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
View.inflate(context, R.layout.layout_searchbar,this);
delete = (ImageView)findViewById(R.id.delete);
input = (EditText)findViewById(R.id.input);
delete.setOnClickListener(this);
input.addTextChangedListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.delete:
input.setText("");
delete.setVisibility(View.INVISIBLE);
break;
}
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { }
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { }
@Override
public void afterTextChanged(Editable editable) {
if(editable.length()!=0){
delete.setVisibility(View.VISIBLE);
}
else{
delete.setVisibility(View.INVISIBLE);
}
}
}
自定义的搜索框
</pre>
###### 之前没有写明使用的正确姿势，昨天晚上我一直辗转反侧睡不着。在这里我想应该写一下使用的正确姿势。
<pre>
<com.llf.loding.view.SearchBar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:layout_marginTop="16dp"
></View>
</com.llf.loding.view.SearchBar>
使用的正确姿势，我这样使用可以减少一层布局
</pre>
###### 最后上结果图
> 不要带有目的性的去做一件事情，这样往往达不到目的。
###### 好的，咱们换个高深点的姿势，来自定义一个头部广告。这边有两种思路，一种是用ViewPager；一种是用ViewFlipper。我这边是用ViewFlipper实现。
<pre>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/iv_height"
android:orientation="vertical">
<com.llf.loding.view.NotifiableViewFlipper
android:id="@+id/viewflipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"
android:inAnimation="@anim/slide_in"
android:outAnimation="@anim/slide_out"
android:flipInterval="2000"
android:persistentDrawingCache="animation"
/>
<LinearLayout
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"
android:background="#15000000"
/>
</RelativeLayout>
广告位布局
</pre>
###### 细心的同学可能已经发现我在这里不小心用了另外一招--继承已有控件。大家不要打我，我这里也是逼不得已，这个ViewFlipper很奇葩，没有滑动到哪个view的回调接口，大家看下去就会明白我不是故意的。这里先上这个自定义的ViewFlipper。
<pre>
public class NotifiableViewFlipper extends ViewFlipper {
private OnFlipListener onFlipListener;
public static interface OnFlipListener {
public void onShowPrevious(NotifiableViewFlipper flipper);
public void onShowNext(NotifiableViewFlipper flipper);
}
public void setOnFlipListener(
OnFlipListener onFlipListener) {
this.onFlipListener = onFlipListener;
}
public NotifiableViewFlipper(Context context) { super(context); }
public NotifiableViewFlipper(Context context, AttributeSet attrs) {super(context, attrs); }
@Override
public void showPrevious() {
super.showPrevious();
if (hasFlipListener()) {
onFlipListener.onShowPrevious(this);
}
}
@Override
public void showNext() {
super.showNext();
if (hasFlipListener()) {
onFlipListener.onShowNext(this);
}
}
}
</pre>
###### 该是上主角的时候了，下面是自定义的广告位。
<pre>
public class AdvertisementLayout extends LinearLayout implements NotifiableViewFlipper.OnFlipListener{
private Context mContext;
private NotifiableViewFlipper viewFlipper;
private LinearLayout indicator;
private List<Integer> datas;
private ImageView[] images;
private int currentItem;
public AdvertisementLayout(Context context) { this(context,null);}
public AdvertisementLayout(Context context, AttributeSet attrs) { this(context, attrs,0); }
public AdvertisementLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
mContext = context;
init();
}
private void init(){
View.inflate(mContext, R.layout.layout_advertisement,this);
viewFlipper = (NotifiableViewFlipper)findViewById(R.id.viewflipper);
indicator = (LinearLayout)findViewById(R.id.indicator);
viewFlipper.setOnFlipListener(this);
}
public void setData(List<Integer> data){
this.datas = data;
instantiation();
}
private void instantiation(){
images = new ImageView[datas.size()];
for (int i=0;i<datas.size();i++){
ImageView imageView = new ImageView(mContext);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new
ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,(int)mContext.getResources().getDimension(R.dimen.iv_height)));
imageView.setImageResource(datas.get(i));
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext,viewFlipper.getDisplayedChild()+"被点击了",Toast.LENGTH_SHORT).show();
}
});
viewFlipper.addView(imageView);
}
for (int i=0;i<datas.size();i++){
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30,30);
layoutParams.setMargins(10,2,10,2);
imageView.setLayoutParams(layoutParams);
imageView.setBackgroundResource(R.drawable.indicator_iv);
imageView.setEnabled(false);
indicator.addView(imageView);
images[i] = imageView;
}
images[0].setEnabled(true);
}
@Override
public void onShowPrevious(NotifiableViewFlipper flipper) {
images[currentItem].setEnabled(false);
images[flipper.getDisplayedChild()].setEnabled(true);
currentItem = flipper.getDisplayedChild();
}
@Override
public void onShowNext(NotifiableViewFlipper flipper) {
images[currentItem].setEnabled(false);
images[flipper.getDisplayedChild()].setEnabled(true);
currentItem = flipper.getDisplayedChild();
}
</pre>
###### 上图咯
> 我们愤怒，不是因为不公平，而是自己处在不公平的位置上。
###### 接下来我们开始讲继承已有View或ViewGroup，说白了就是扩展功能。在讲这个之前我们先来看两个知识点：
###### 1. 涉及到的常用方法
- onFinishInflate()-当应用从XML加载该组件并用它构建界面之后调用的方法。
- onMeasure()-检测View组件及其子组件的大小,此方法执行之后才能获取到控件的大小。
- onLayout()-当该组件需要分配其子组件的位置、大小时。一般在viewGroup中才会使用到此方法。
- onSizeChange()-当该组件的大小被改变时调用。
- onDraw() -当组件将要绘制它的内容时调用。
- onTouchEvent()-当发生触屏事件时调用。
- onWindowFocusChanged(boolean) 当该组件得到、失去焦点时调用。
- onAtrrachedToWindow() 当把该组件放入到某个窗口时调用。
- onDetachedFromWindow() 当把该组件从某个窗口上分离时触发的方法。
- onWindowVisibilityChanged(int): 当包含该组件的窗口的可见性发生改变时触发的方法。
###### 我这里详细讲一下onMeasure方法和onLayout方法。说得通俗一点onMeasure方法就是告诉父容器你要多大的地方。对于ViewGroup在这里需要递归的去计算每一个子视图的大小。onMeasure方法有两个参数(widthMeasureSpec,heightMeasureSpec)表示布局期望的子控件规格。等一下我放一张图就好理解了。在这里还需要知道三种测量模式：
1.EXACTLY 表示设置了精确的值，一般当childView设置其宽、高为精确值、match_parent时，ViewGroup会将其设置为EXACTLY；
2.AT_MOST 表示子布局被限制在一个最大值内，一般当childView设置其宽、高为wrap_content时，ViewGroup会将其设置为AT_MOST；
3.UNSPECIFIED 表示子布局想要多大就多大，一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此种模式比较少见。
具体可参考<http://blog.csdn.net/dmk877/article/details/49558367>
<pre>
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int resultWidth = 100;//设置一个默认宽度
if(modeWidth == MeasureSpec.EXACTLY){
resultWidth = sizeWidth;
}else{
resultWidth = Math.min(resultWidth,sizeWidth);
}
int resultHeight = 100;//设置一个默认高度
if(modeHeight == MeasureSpec.EXACTLY){
resultHeight = sizeHeight; }
else{
resultHeight = Math.min(resultHeight,sizeHeight);
}
//此句必须要写
setMeasuredDimension(resultWidth,resultHeight);}
简单的重写onMeasure的列子</pre>
###### 接下来我就要用重写onMeasure方法来打造能适配图片的ImageView。这里有一篇个人感觉不错的适配文章<http://www.zcool.com.cn/article/ZNjI3NDQ=.html>
<pre>
public class CleverImageView extends ImageView {
private double scale = 3.6;//宽高比
public CleverImageView(Context context) { this(context, null); }
public CleverImageView(Context context, AttributeSet attrs) {this(context, attrs, 0); }
public CleverImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
if (modeWidth == MeasureSpec.EXACTLY && modeHeight == MeasureSpec.AT_MOST) {
sizeHeight = (int) (sizeWidth / scale + 0.5f);//这里加0.5f是为了四舍五入
}
else if (modeHeight == MeasureSpec.EXACTLY && modeWidth == MeasureSpec.AT_MOST) {
sizeWidth = (int) (sizeHeight / scale + 0.5f); }
setMeasuredDimension(sizeWidth,sizeHeight);
}
public void setScale(double scale) {
this.scale = scale;
}
}
其实ImageView的adjustbound属性就能解决这个问题，我这边只是拿这个举个栗子。
</pre>
###### 知道了大小之后，通过onLayout就是解决放在哪里和怎么放的问题。各位可以看一下流式布局<https://github.com/blazsolar/FlowLayout>，对这两个方法诠释的比较清楚。我这边简单的实现了一个。
<pre>
public class FlowLayoutSp extends ViewGroup {
public FlowLayoutSp(Context context) { super(context); }
public FlowLayoutSp(Context context, AttributeSet attrs) {super(context, attrs);}
public FlowLayoutSp(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
/** * 只有在内容为wrap情况下才需要记录width和height * width：总宽度 * height：总高度 * lineWidth:行宽 * lineHeight ：行高 */
int width = 0;
int height = 0;
int lineWidth = 0;
int lineHeight = 0;
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
lineHeight = Math.max(lineHeight, childHeight);
lineWidth += childWidth;
if (lineWidth > sizeWidth) {
lineWidth = childWidth;
height += lineHeight;
}else{
width = Math.max(width, lineWidth);
}
if (i == getChildCount() - 1) {
width = Math.max(width, lineWidth);
height += lineHeight;
}
}
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height); }
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int left = 0;
int right = 0;
int top = 0;
int bottom = 0;
int lineWidth = 0;
int lineHeight = 0;
int width = getWidth();//ViewGroup的总宽
int height = 0;//目前的行高
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int chidWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);
left = lp.leftMargin + lineWidth;
right = lp.rightMargin + chidWidth + lp.leftMargin + lineWidth;
top = lp.topMargin + height;
bottom = lp.bottomMargin + childHeight + lp.topMargin + height;
lineWidth = right;
if(lineWidth > width) {
lineWidth = 0;
left = lp.leftMargin + lineWidth;
right = lp.rightMargin + chidWidth + lp.leftMargin + lineWidth;
height += lineHeight;
top = lp.topMargin + height;
bottom = lp.bottomMargin + childHeight + lp.topMargin + height;
lineWidth = right;
}
child.layout(left, top, right-lp.rightMargin, bottom-lp.bottomMargin);
}
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
</pre>
> 每一个ViewGroup负责要求它的每一个孩子被绘制，每一个View负责绘制自己。
###### 2.自定义属性，即在xml设置属性或则设置style。流程如下：
- 在res/values文件下定义一个attrs.xml文件。建立declare-styleable，取一个自己想取得名字，不过最好是跟自定义控件的名字保持一致。
- 定义需要用到的各个属性，属性的类型在下方表格中给出。属性定义时可以指定多种类型值。
- 在自定义控件中获取定义的值。一定要注意最后需要回收。
###### 废话不多说，上列子了。这个是一个通过继承HorizontalScrollView实现类似qq侧滑效果。注意这边的属性动画用的nineoldandroids框架的.
<pre>
public class SlideMenu extends HorizontalScrollView{
private int screenWidth;
private DisplayMetrics outMetrics;
private int margenRight, menuWidth;
private LinearLayout mWapper;
private ViewGroup mMenu;
private ViewGroup mContent;
private boolean first = true;
public SlideMenu(Context context, AttributeSet attrs) { super(context, attrs);
WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
outMetrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(outMetrics);
screenWidth = outMetrics.widthPixels;
margenRight = 100;
}
/* * 设置子view的宽和高 设置viewGroup的宽和高。目的是设置左边布局的一个偏移量 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (first) {
mWapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) mWapper.getChildAt(0);
mContent = (ViewGroup) mWapper.getChildAt(1);
menuWidth = mMenu.getLayoutParams().width = screenWidth-margenRight;
mContent.getLayoutParams().width = screenWidth;
first = false;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
//一开始向左滚动screenWidth - margenRight
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
this.scrollTo(screenWidth - margenRight, 0);
}
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
//当滑动的距离大于menu宽度的一半自动滚动menuWidth，否则滚回起始点
if (scrollX >= menuWidth / 2) {
//smoothScrollTo方法滚动平缓
this.smoothScrollTo(menuWidth, 0);
} else {
this.smoothScrollTo(0, 0);
}
return true;
}
return super.onTouchEvent(ev);
}
/** * 滚动发生时 */
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//由于刚开始时向左边滚动了menuWidth，所以l的起始值为menuWidth
float scale = l x 1.0f / menuWidth; // 1 ~ 0
float rightScale = 0.7f + 0.3f x scale;
float leftScale = 1.0f - scale x 0.3f;
float leftAlpha = 0.6f + 0.4f x (1 - scale);
// 调用属性动画
ViewHelper.setTranslationX(mMenu, menuWidth * scale* 0.8f);
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, getHeight() / 2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, leftAlpha);
}
}
</pre>
#####细心的朋友可能已经注意到上方的列子中第一个子View右边的偏移量margenRight 我是写死的。这时候吐糟声就来了“你这个很不优雅啊，我想自定义怎么办啊，我想在xml中设置怎么办啊”。客官别急，这就满足你的要求。且看下方修改后的代码。
- 首先建立declare-styleable，说白了就是定义你需要用到的属性。在这之前先在values下建立一个叫attr的文件，所有declare-styleable放在它里面
<resources>
<declare-styleable name="SlideMenu">
<attr name="marginRight" format="dimension"></attr>
</declare-styleable>
</resources>
- 接下来就是修改SlideMenu ，我这边单放修改了的代码，因为我懒
public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.SlideMenu);
margenRight = array.getInteger(R.styleable.SlideMenu_marginRight,(int)getResources().getDimension(R.dimen.marginRight));//我这边设置了默认偏移量是50dp
array.recycle();//最后别忘了回收TypedArray
WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
outMetrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(outMetrics);
screenWidth = outMetrics.widthPixels;}
- 然后你就可以为所欲为了，我们来看下xml中怎么用
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
//这边添加命名空间，名字你可以随意取，我这边取得是app。我这简单的一种写法。还有一种写法是后面跟自定义view所在的包名
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<com.llf.wheelview.SlideMenu
android:layout_width="match_parent"
android:layout_height="match_parent"
app:marginRight="@dimen/marginRight"
>
</com.llf.wheelview.SlideMenu>
</LinearLayout>
##纯自定义
在讲这个之前先要学习一下动画和绘图
动画可以参考我在github上托管的项目，比较详细<https://github.com/liulingfeng/Animation>
绘画看我的另外一篇文章<http://www.jianshu.com/p/d92f1bebd3ab>
######学好了基本功开始学习心法
