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

来源：互联网发布：wps办公软件官网编辑：程序博客网时间：2024/05/17 08:01

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果)，老规矩看图先:
这里写图片描述
首先看看主界面的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的界面效果是
这里写图片描述
这样主体的布局搭建完了。接着我们有一个自定义的类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());}

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

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

0 0