Android仿虾米音乐播放器之布局介绍

      正式的第一篇先讲布局，首先分析下面的图中所用的布局

侧滑用的是鸿洋大神写的侧滑控件，非常的好用，就是没有加入事件分发。代码如下，自定义的控件

public class SlidingMenu extends HorizontalScrollView{private LinearLayout mWapper;private ViewGroup mMenu;private ViewGroup mContent;private int mScreenWidth;private int mMenuWidth;// dpprivate int mMenuRightPadding = 50;private boolean once;private boolean isOpen =false;/** * 未使用自定义属性时，调用 *  * @param context * @param attrs */public SlidingMenu(Context context, AttributeSet attrs){this(context, attrs, 0);}/** * 当使用了自定义属性时，会调用此构造方法 *  * @param context * @param attrs * @param defStyle */public SlidingMenu(Context context, AttributeSet attrs, int defStyle){super(context, attrs, defStyle);// 获取我们定义的属性TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidingMenu, defStyle, 0);int n = a.getIndexCount();for (int i = 0; i < n; i++){int attr = a.getIndex(i);switch (attr){case R.styleable.SlidingMenu_rightPadding:mMenuRightPadding = a.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));break;}}a.recycle();WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);mScreenWidth = outMetrics.widthPixels;}public SlidingMenu(Context context){this(context, null);}/** * 设置子View的宽和高 设置自己的宽和高 */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){if (!once){mWapper = (LinearLayout) getChildAt(0);mMenu = (ViewGroup) mWapper.getChildAt(0);mContent = (ViewGroup) mWapper.getChildAt(1);mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth- mMenuRightPadding;mContent.getLayoutParams().width = mScreenWidth;once = true;}super.onMeasure(widthMeasureSpec, heightMeasureSpec);}/** * 通过设置偏移量，将menu隐藏 */@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b){super.onLayout(changed, l, t, r, b);if (changed){this.scrollTo(mMenuWidth, 0);}}@Overridepublic boolean onTouchEvent(MotionEvent ev){int action = ev.getAction();switch (action){case MotionEvent.ACTION_UP:// 隐藏在左边的宽度int scrollX = getScrollX();if (scrollX >= mMenuWidth / 2){this.smoothScrollTo(mMenuWidth, 0);isOpen = false;} else{this.smoothScrollTo(0, 0);isOpen = true;}return true;}return super.onTouchEvent(ev);}/** * 打开菜单 */public void openMenu(){if (isOpen)return;this.smoothScrollTo(0, 0);isOpen = true;}public  void closeMenu(){if (!isOpen)return;this.smoothScrollTo(mMenuWidth, 0);isOpen = false;}public boolean isOpen(){return isOpen;}/** * 切换菜单 */public void toggle(){if (isOpen){closeMenu();} else{openMenu();}}/** * 滚动发生时 */@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt){super.onScrollChanged(l, t, oldl, oldt);float scale = l * 1.0f / mMenuWidth; // 1 ~ 0/** * 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale *  * 区别2：菜单的偏移量需要修改 *  * 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0  * 0.6+ 0.4 * (1- scale) ; *  */float rightScale = 0.7f + 0.3f * scale;float leftScale = 1.0f - scale * 0.3f;float leftAlpha = 0.6f + 0.4f * (1 - scale);// 调用属性动画，设置TranslationXViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, leftAlpha);// 设置content的缩放的中心点ViewHelper.setPivotX(mContent, 0);ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);}}

主布局 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:hyman="http://schemas.android.com/apk/res/com.sheepm.copyxiami"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.sheepm.Utils.SlidingMenu        android:id="@+id/id_menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/personal_background_shadow_am"        hyman:rightPadding="70dp" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:orientation="horizontal" >            <include layout="@layout/menu_left" />            <LinearLayout                android:id="@+id/main"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:orientation="vertical" >                <FrameLayout                    android:id="@+id/fragment_main"                    android:layout_width="match_parent"                    android:layout_height="0dp"                    android:layout_weight="1" >                </FrameLayout>                <include layout="@layout/bottom_music" />            </LinearLayout>        </LinearLayout>    </com.sheepm.Utils.SlidingMenu></RelativeLayout>

其中 ，menu_left是左边侧滑的布局，下面的LinearLayout是主布局，其中由一个FrameLayout，和一个底部的播放条组成，这是为了使播放条相当于一个单例的模式，不会重复生成，界面上也比较友好，继续深入Framelayout，布局如下

layout/fragment_main.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:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="#fff" >        <ImageView            android:id="@+id/nav_change"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:src="@drawable/default_artist_login_mini" />        <TextView            android:id="@+id/tv_fragment_my"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="我的"            android:textColor="#FA843A"            android:textStyle="bold" />        <TextView            android:id="@+id/tv_fragment_recommend"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐"            android:textStyle="bold" />        <TextView            android:id="@+id/tv_fragment_music"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="乐章"            android:textStyle="bold" />        <ImageView            android:id="@+id/nav_search"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:src="@drawable/navigation_bar_btn_search" />    </LinearLayout>    <include layout="@layout/line_d3d3d3" />    <FrameLayout        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </FrameLayout></LinearLayout>

在上面的LinearLayout中时主布局的我的、推荐、乐章等布局，下面又嵌入了一个FrameLayout，想要知道如何在FrameLayout中内嵌FrameLayout并进行操作，可以看我前面的文章 点击打开链接

整体的布局架构就是这样，其他小页面的布局就不赘述了，源码已开源，可以自己看看