android 高仿UC浏览器首页上拉面板效果

来源：互联网发布：淘宝经营类目的优势编辑：程序博客网时间：2024/05/17 07:06

最近在项目中，产品经理看见uc浏览器首页的上拉面板的效果做的非常不错，于是希望我们的项目的首页也做成这样的效果。于是经过思考后，实现了一个仿uc浏览器的上拉面板效果。
效果图
接下来说一下实现的思路吧。
首先这个上拉的效果在github上有一个开源的项目。可以拿来使用。链接地址
下面是布局xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.myapplication.MainActivity">    <com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"        android:id="@+id/sliding_layout"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="bottom"        sothree:umanoDragView="@+id/ll_panl"        sothree:umanoPanelHeight="168dp"        sothree:umanoScrollableView="@+id/content_view"        sothree:umanoShadowHeight="4dp">        <TextView            android:id="@+id/tv_main"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="Main Content"            android:textSize="16sp" />        <LinearLayout            android:id="@+id/ll_panl"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center|top"            android:orientation="vertical">            <com.example.myapplication.refresh.PullToRefreshLayout                android:id="@+id/refresh_view"                android:layout_width="match_parent"                android:layout_height="match_parent">                <include layout="@layout/refresh_head" />                <!-- 支持所有实现Pullable接口的View -->                <com.example.myapplication.refresh.PullableListView                    android:id="@+id/content_view"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:background="@color/white"                    android:divider="@color/gray"                    android:dividerHeight="1dp" />                <include layout="@layout/load_more" />            </com.example.myapplication.refresh.PullToRefreshLayout>        </LinearLayout>    </com.sothree.slidinguppanel.SlidingUpPanelLayout></LinearLayout>

注意一点是面板的布局里面只能有两个孩子，不然会报异常
但是如果你想在下面的面板中放一个listview的话就会有滑动冲突，因为listview需要滑动，上拉面板也需要滑动。遇见冲突当然就要解决了，在仔细观察uc的效果后，终于有了思路了。下面的listview已经不是一个传统的listview了。这时候我们可以引入带下拉刷新的listview。说到这也许大家应该明白差不多了。意思是，我们可以监听面板的状态，在面板拉上去时就禁止面板的滑动。这时候面板要想下拉就可以在listview中监听了，因为下拉刷新的listview有一个下拉的动作。如果在listview中监听到有下拉的动作就让面板下去。
下面看一下具体的代码实现：

package com.example.myapplication;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.ListView;import android.widget.TextView;import com.example.myapplication.refresh.PullToRefreshLayout;import com.sothree.slidinguppanel.SlidingUpPanelLayout;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private ListView listView;    private PullToRefreshLayout ptrl;    private TextView mainTV;    /**     * 上拉面板的布局     */    private SlidingUpPanelLayout slidingUpPanelLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        slidingUpPanelLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);        ptrl = ((PullToRefreshLayout) findViewById(R.id.refresh_view));        listView = (ListView) findViewById(R.id.content_view);        mainTV = (TextView) findViewById(R.id.tv_main);        initListView();        ptrl.setOnRefreshListener(new PullToRefreshLayout.OnRefreshListener() {            @Override            public void onRefresh(final PullToRefreshLayout pullToRefreshLayout) {                //监听面板的下拉                slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);                pullToRefreshLayout.refreshFinish(PullToRefreshLayout.SUCCEED);            }            @Override            public void onLoadMore(PullToRefreshLayout pullToRefreshLayout) {            }        });        slidingUpPanelLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {            //当滑动面板的位置变化调用            @Override            public void onPanelSlide(View panel, float slideOffset) {                //上面面板的缩放的效果                mainTV.setScaleX(1 - slideOffset + 0.7F * slideOffset);                mainTV.setScaleY(1 - slideOffset + 0.7F * slideOffset);            }            @Override            public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {                //监听面板上拉                if (newState == SlidingUpPanelLayout.PanelState.EXPANDED) {                    slidingUpPanelLayout.setTouchEnabled(false);                    listView.setEnabled(true);                }else if(newState == SlidingUpPanelLayout.PanelState.COLLAPSED){                    slidingUpPanelLayout.setTouchEnabled(true);                    listView.setEnabled(false);                }else if(newState == SlidingUpPanelLayout.PanelState.ANCHORED){                    slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);                    listView.setEnabled(false);                }            }        });    }    /**     * ListView初始化方法     */    private void initListView() {        List<String> items = new ArrayList<String>();        for (int i = 0; i < 30; i++) {            items.add("这里是item " + i);        }        MyAdapter adapter = new MyAdapter(this, items);        listView.setAdapter(adapter);    }}

就这样一个高仿uc浏览器的上拉面板效果就实现了，喜欢就点个赞吧

源码下载

6 0