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

HelloJack

发布于 2018-08-28 14:56:18

8020

发布于 2018-08-28 14:56:18

文章被收录于专栏：Jack的Android之旅

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个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());
}

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016.10.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐