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.SlidingMenuandroid:id="@+id/id_menu"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/personal_background_shadow_am"hyman:rightPadding="70dp" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal" ><include layout="@layout/menu_left" /><LinearLayoutandroid:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><FrameLayoutandroid: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" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="#fff" ><ImageViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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" /><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" ></FrameLayout></LinearLayout>

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

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

Android仿虾米音乐播放器之布局介绍相关推荐

Android仿虾米音乐播放器之开篇介绍
断断续续的写了好久,因为项目已经接近尾声了,所以要开源出来,一开始决定模仿虾米音乐是因为布局UI上比较喜欢,其中最困难的地方应该是多个播放页面的联动,通知,尾部栏,本地音乐选择栏,歌词页面,4个地方需 ...
android 音乐播放器的状态栏通知,Android仿虾米音乐播放器之通知栏notification解析...
通知栏notification是Android中一个很重要的组件,可以在顶部状态栏中存在,用户也可以通过此来操作应用,在Android中只有3.0以上的版本才加入了notification的按钮点击功 ...
Android仿虾米音乐播放器之MediaPlayer使用
MediaPlayer是Android中用来播放媒体文件的一个类,我们用其来播放音乐文件,先介绍用法. 首先MediaPlayer需要实例化对象,我们在onStratCommand中进行实例化. pr ...
Android仿虾米音乐播放器之电话和耳机监听
任何一个用户都不会希望在电话打来时,音乐依然在播放,这样或许用户马上就卸载了我们的app,另外当用户的耳机拨出时我们需要及时的停止音乐,因为拨出耳机这个动作可能不是用户主导的,或许是耳机的松动,或许是 ...
Android仿虾米音乐播放器之自定义进度条seekbar
先上图吧,仿照写的进度条很明显不是系统的自带的进度条,所以我们需要自定义来实现这个效果,先看看官方给的例子 <layer-list xmlns:android="http://sch ...
Android仿虾米音乐播放器之service
service就是后台服务,不同于activity在前台,虽然用户看不见,但是作用是很大的. 我们在service中先需要实例化mediaplayer对象,这个在上节中已经讲了,除此之外我们需要注册一 ...
Android仿虾米音乐播放器之本地音乐获取
Android系统为了一些常用的信息(如音乐.视频.图像.联系人等)内置了一系列的ContentProvider,所以我们可以通过这个来获取Anroid中本地音乐,首先得加入权限 <uses-p ...
android+仿ios+音乐播放器,iOS简单的音乐播放器(仿QQ音乐)
AVPlayer实现基本的播放,暂停,上一首,下一首,调节音量,调节进度等,正在学习的新人可以看下,有什么不足可以互相学习,谢谢支持 qq音乐.gif 这个是我写的一个简单的低仿QQ音乐, 如果你也喜 ...
【android】音乐播放器之设计思路
学习Android有一个多月,看完了<第一行代码>以及mars老师的第一期视频通过音乐播放器小项目加深对知识点的理解.从本文开始,将详细的介绍简单仿多米音乐播放器的实现,以及网络解析数据获 ...
【android】音乐播放器之UI设计的点点滴滴
学习Android有一个多月,看完了<第一行代码>以及mars老师的第一期视频通过音乐播放器小项目加深对知识点的理解.从本文开始,将详细的介绍简单仿多米音乐播放器的实现,以及网络解析数据获 ...

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

Android仿虾米音乐播放器之布局介绍相关推荐

最新文章

热门文章