模仿企鹅FM播放主页面滑动动态改变各视图的大小

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果)，老规矩看图先:

首先看看主界面的xml布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/black"><com.qqfm.jack.qqfmcontentview.util.ObservableScrollView android:id="@+id/MenuMainScrollView"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:id="@+id/contentshow"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"/></com.qqfm.jack.qqfmcontentview.util.ObservableScrollView><include android:id="@+id/contentcontrolview"layout="@layout/contentcontrol"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true" /></RelativeLayout>

在这布局里好包含着一个布局就是contentcontrol.xml文件，由于此文件有点多并且也简单所以就不列出来，详细到时可看源码，contentcontrol.xml的界面效果是

这样主体的布局搭建完了。接着我们有一个自定义的类ObservableScrollView.java,而这个类也是很简单的，只是起到了一个接口监听滑动变量的作用，代码如下：

public class ObservableScrollView extends HorizontalScrollView {private ScrollViewListener scrollViewListener = null;public ObservableScrollView(Context context) {super(context);}public ObservableScrollView(Context context, AttributeSet attrs,int defStyle) {super(context, attrs, defStyle);}public ObservableScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public void setScrollViewListener(ScrollViewListener scrollViewListener) {this.scrollViewListener = scrollViewListener;}@Overrideprotected void onScrollChanged(int x, int y, int oldx, int oldy) {super.onScrollChanged(x, y, oldx, oldy);if (scrollViewListener != null) {scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);}}}

如代码所示ObservableScrollView只是继承HorizontalScrollView ，定义接口监听onScrollChanged()方法的各个变量。

接下来就是最终要的MainActivity.java里面的代码，这是整个逻辑的核心代码都在这里，代码如下：

public class MainActivity extends AppCompatActivity implements View.OnTouchListener,ScrollViewListener {private ObservableScrollView mHorizontalScrollView;private LinearLayout Contentshow;private RelativeLayout contentcontrolshow=null;private LinearLayout contentcontrolmenu=null;private RelativeLayout contentcontrolbu=null;//屏幕的宽private int width=0;//屏幕的高private int height=0;//信息viewprivate View info;//菜单viewprivate View menu;//控制按钮viewprivate View control;//半个页面的距离private int HalfMenuWidth=0;private int ScrollX;//显示信息百分比private float InfoPercent=0;//菜单百分比private float MenuPercent=0;//底部视图各部分的高度private int ShowHeight;private int MenuHeight;private int ControlHeight;//第一次滑动状态private boolean FirstScoll=true;private boolean InitFirstData=true;private Float infoheight=0.0f;private Float menuheight=0.0f;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}//真正的View显示时onWindowFocusChanged()函数被执行@Overridepublic void onWindowFocusChanged(boolean hasFocus) {super.onWindowFocusChanged(hasFocus);if(InitFirstData){width= ScreenUtils.getScreenWidth(this);height=ScreenUtils.getViewHeight(this);initScrollViewPlace();initViewSize();InitFirstData=false;}}//初始时移动到详细页面public void initScrollViewPlace(){mHorizontalScrollView.post(new Runnable() {@Overridepublic void run() {//滑到显示信息的ViewmHorizontalScrollView.smoothScrollTo(width,0);// UpdateViewHeight(height/2);}});}//初始化视图public void initView(){try{//初始化HorizontalScrollViewmHorizontalScrollView=(ObservableScrollView)findViewById(R.id.MenuMainScrollView);//设置监听mHorizontalScrollView.setOnTouchListener(this);mHorizontalScrollView.setScrollViewListener(this);//初始化底部视图Contentshow=(LinearLayout)findViewById(R.id.contentshow);//初始化contentcontrol的各个部分contentcontrolshow=(RelativeLayout)findViewById(R.id.contentcontrol_show);contentcontrolmenu=(LinearLayout)findViewById(R.id.contentcontrol_menu);contentcontrolbu=(RelativeLayout)findViewById(R.id.controlbutton);//初始化滑动的三个视图info= LayoutInflater.from(this).inflate(R.layout.contentinfo,null);menu= LayoutInflater.from(this).inflate(R.layout.contentmenu, null);control=findViewById(R.id.contentcontrolview);}catch(Exception e){}}public void initViewSize(){//半个页面的距离HalfMenuWidth=width/2;//为info,menu和control赋值LinearLayout.LayoutParams InfoLayoutParams=new LinearLayout.LayoutParams(width,height/2);LinearLayout.LayoutParams MenuLayoutParams=new LinearLayout.LayoutParams(width,height);//显示信息的View是屏幕高度的二分之一info.setLayoutParams(InfoLayoutParams);//显示菜单的View是屏幕的高度menu.setLayoutParams(MenuLayoutParams);//控制按钮的View是屏幕高度的二分之一control.getLayoutParams().height=height/2;//添加ViewContentshow.addView(menu);Contentshow.addView(info);}@Overridepublic boolean onTouch(View v, MotionEvent event) {switch(event.getAction()){case MotionEvent.ACTION_UP:Log.e("onScrollChanged",ScrollX+"");Log.e("onScrollChanged2",width+"");if(ScrollX>HalfMenuWidth){mHorizontalScrollView.smoothScrollTo(width,0);}else{mHorizontalScrollView.smoothScrollTo(0,0);}return true;}return super.onTouchEvent(event);}public void ChangeHeight(View view,int height){ViewGroup.LayoutParams layoutParams=view.getLayoutParams();layoutParams.height=height;view.setLayoutParams(layoutParams);}public void UpdateViewHeight(int height){ViewGroup.LayoutParams layoutParams=control.getLayoutParams();layoutParams.height=height;control.setLayoutParams(layoutParams);}@Overridepublic void onScrollChanged(ObservableScrollView scrollView, int scrollX,int scrollY,int oldScrollX,int oldScrollY) {this.ScrollX=scrollX;if(FirstScoll){DecimalFormat df=new DecimalFormat("0.00");ShowHeight=contentcontrolshow.getHeight();MenuHeight=contentcontrolmenu.getHeight();ControlHeight=contentcontrolbu.getHeight();// info缩小对应的百分比InfoPercent=Float.valueOf(df.format((float)width/ShowHeight));// menu缩小对应的百分比MenuPercent=Float.valueOf(df.format((float)width/MenuHeight));FirstScoll=false;//按钮保持原来的大小ChangeHeight(contentcontrolbu,ControlHeight);//保持原样ChangeHeight(info,height/2);ChangeHeight(menu,height-ControlHeight);}infoheight=Float.valueOf(scrollX/InfoPercent);menuheight=Float.valueOf(scrollX/MenuPercent);//更新view的高度UpdateViewHeight(infoheight.intValue()+menuheight.intValue()+ControlHeight);//info缩小对应的百分比ChangeHeight(contentcontrolshow,infoheight.intValue());//menu缩小对应的百分比ChangeHeight(contentcontrolmenu,menuheight.intValue());}}

代码量还是有点多，不过一步一步来其实也就是几步而已。从OnCreate()开始在setContentView()加载完后，调用initView()方法对变量和子View进行初始化。对mHorizontalScrollView控件进行监听setOnTouchListener和setScrollViewListener，其中是自定义的接口，在监听自定义类ObservableScrollView。contentcontrolshow，contentcontrolmenu，contentcontrolbu分别对应着南海归墟，左中右，和底下五个按钮的View,如上图。info对应着写着contentinfo的View，menu对应着写着contentmenu的View.

接着当Activity显示为可见的时候会回调onWindowFocusChanged()方法。而onWindowFocusChanged()方法里主要的操作是初始化各个子View的大小。有人会问为什么不在onCreate()方法里就初始化子View的大小？因为在onCreate()时此时整个Activity的界面还没有显示，所以等不到屏幕的整个View的大小的参数，所以在onWindowFocusChanged()里，首先把ObservableScrollView包含的info和menu这两个View移到info这个View里。然后动态设置各个子View的大小，核心代码如下：

//显示信息的View是屏幕高度的二分之一info.setLayoutParams(InfoLayoutParams);//显示菜单的View是屏幕的高度menu.setLayoutParams(MenuLayoutParams);//控制按钮的View是屏幕高度的二分之一control.getLayoutParams().height=height/2;

当我们左右滑动界面是，会回调onScrollChanged()方法。因为Activity初始化完在没滑动的时候会回调onScrollChanged()方法，所以当第一次调用该方法时要计算出写着contentinfo的View和写着contentmenu的View缩小或放大对应的百分比，再设置control里面三个View大小。这样一开始的界面的初始化才能达到效果。

最后当滑动的时候我们只需要计算出滑动距离所要改变的大小，

infoheight=Float.valueOf(scrollX/InfoPercent);

menuheight=Float.valueOf(scrollX/MenuPercent);

再动态的设置各个View的高度

//更新control的高度UpdateViewHeight(infoheight.intValue()+menuheight.intValue()+ControlHeight);//contentcontrolshow缩小对应的百分比ChangeHeight(contentcontrolshow,infoheight.intValue());//contentcontrolmenu缩小对应的百分比ChangeHeight(contentcontrolmenu,menuheight.intValue());}

既可以实现滑动改变的效果。

具体的细节请看源码吧，如果对你有帮助就请给我给星星吧

如果觉得《模仿企鹅FM播放主页面滑动动态改变各视图的大小》对你有帮助，请点赞、收藏，并留下你的观点哦！