国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果)，老规矩看图先:
fm.gif
首先看看主界面的xml布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/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的界面效果是
fm2.PNG
这样主体的布局搭建完了。接着我们有一个自定义的类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;
}
@Override
protected 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;
//信息view
private View info;
//菜单view
private View menu;
//控制按钮view
private 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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
//真正的View显示时onWindowFocusChanged()函数被执行
@Override
public 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() {
@Override
public void run() {
//滑到显示信息的View
mHorizontalScrollView.smoothScrollTo(width,0);
// UpdateViewHeight(height/2);
}
});
}
//初始化视图
public void initView(){
try{
//初始化HorizontalScrollView
mHorizontalScrollView=(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;
//添加View
Contentshow.addView(menu);
Contentshow.addView(info);
}
@Override
public 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);
}
@Override
public 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());
}
既可以实现滑动改变的效果。
具体的细节请看源码吧，如果对你有帮助就请给我给星星或喜欢吧
