最近在项目中，产品经理看见uc浏览器首页的上拉面板的效果做的非常不错，于是希望我们的项目的首页也做成这样的效果。于是经过思考后，实现了一个仿uc浏览器的上拉面板效果。
接下来说一下实现的思路吧 。
首先这个上拉的效果在github上有一个开源的项目。可以拿来使用。链接地址
下面是布局xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.myapplication.MainActivity"><com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="/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.PullToRefreshLayoutandroid: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.PullableListViewandroid: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;@Overrideprotected 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() {@Overridepublic void onRefresh(final PullToRefreshLayout pullToRefreshLayout) {//监听面板的下拉slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);pullToRefreshLayout.refreshFinish(PullToRefreshLayout.SUCCEED);}@Overridepublic void onLoadMore(PullToRefreshLayout pullToRefreshLayout) {}});slidingUpPanelLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {//当滑动面板的位置变化调用@Overridepublic void onPanelSlide(View panel, float slideOffset) {//上面面板的缩放的效果mainTV.setScaleX(1 - slideOffset + 0.7F * slideOffset);mainTV.setScaleY(1 - slideOffset + 0.7F * slideOffset);}@Overridepublic 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浏览器的上拉面板效果就实现了，喜欢就点个赞吧
源码下载
如果觉得《android 高仿UC浏览器首页上拉面板效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
