仿优酷菜单 从布局开始 01

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_23237491/article/details/62046190

近来思想发生了一个重大的转变——避而不见往往失败，迎难而上反而有成功的可能。其实吧，在今天之前，我的内心一直是非常排斥自定义view的，很简单——因为不会。

很多时候项目需要用到自定义控件，永远都是百度百度，开发者都知道，纵使是百度，也不可能百度出一模一样的效果，那么这个时候，就需要根据百度出来的东西自己再次改造，然而问题来了，因为之前由于自己的无知而无比排斥的自定义导致我看到别人的代码时真的是看得一脸懵逼完全不懂，周而复始，自身恐惧自定义的心理进而导致更加抵触自定义，其实归根到底就是不敢直面困难。所以，今日，痛定思痛决定好好学习天天向上直面困难挑战自我，特地找来一系列的视频去观看如何自定义view，不求能完美自定义，至少以后看别人的代码的时候能稍微有点思路。 

一步一步跟着视频走，从0到1先做布局：

<?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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.honey.youkuview.MainActivity">


    <RelativeLayout
        android:id="@+id/level1"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/level1">

    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/level2"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:background="@drawable/level2">

    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/level3"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:background="@drawable/level3">

    </RelativeLayout>
</RelativeLayout>

这个布局最初做出来是这样的效果，我相信有很多初学者都像我一样，看到最终实现的效果图，就会不假思索的先从内布置到外，那么这样做的后果是什么呢，本身我们每一块，都是需要有一个点击事件的，那么如果由内布置到外的话，就会导致最外面大的那块布局会把里面小的那块布局给挡住，导致小布局无法点击，就像这样，不管怎么点击，都点到了最外面最大的level3：

那么这个时候怎么办呢，很简单，只要把布局的位置对调就可以了，实现最大的在最下面：

<?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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.honey.youkuview.MainActivity">

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3">

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2"></RelativeLayout>

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1"></RelativeLayout>
</RelativeLayout>

那么对调之后，实现的样子就是这个样子的，按最小内圈，就能按到了：

那么继续，照着视频一步步继续往下做，最后的布局是这样的：

<?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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.honey.youkuview.MainActivity">

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3">

        <ImageView
            android:id="@+id/channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:src="@drawable/channel1" />

        <ImageView
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/channel1"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="33dp"
            android:src="@drawable/channel2" />

        <ImageView
            android:id="@+id/channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/channel2"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="63dp"
            android:src="@drawable/channel3" />

        <ImageView
            android:id="@+id/channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            android:src="@drawable/channel4" />

        <ImageView
            android:id="@+id/channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="8dp"
            android:src="@drawable/channel7" />

        <ImageView
            android:id="@+id/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/channel7"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="33dp"
            android:src="@drawable/channel6" />

        <ImageView
            android:id="@+id/channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/channel6"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="63dp"
            android:src="@drawable/channel5" />

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2">


        <ImageView
            android:id="@+id/icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:src="@drawable/icon_search" />

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            android:src="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="8dp"
            android:src="@drawable/icon_myyouku" />


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1">


        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/icon_home" />


    </RelativeLayout>
</RelativeLayout>

最后出来的效果是这样的：

布局代码在这里：点击打开链接

逻辑的实现放在下一节~