沉浸式状态栏+头部拉伸+一键置顶

一些普通的界面加上这些效果应该还是不错的,所以就抽空写了这个小小的demo.
Demo传送门 : http://download.csdn.net/detail/as_jon/9651533

思路:
1.沉浸式状态栏 : 修改系统状态栏属性,使他始终与顶部导航栏色值一样.
2.头部拉伸跟一键置顶 : 自定义 Scroll View ,获取界面滑动高度,然后做出相应的操作.

代码如下:

Main Activity 文件

import android.graphics.Color;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private NotifyingScrollView scrollview;
    private RelativeLayout topbar;
    private ImageView topimage;
    private ImageView iv_back;
    private TextView tv_title;
    private TextView textdemo;
    private Button button;
    private ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //沉浸式状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

        }


        InfoData();
    }

    public void InfoData(){

        topbar = (RelativeLayout) findViewById(R.id.topbar);
        topimage = (ImageView) findViewById(R.id.topimage);
        iv_back = (ImageView) findViewById(R.id.iv_back);
        tv_title = (TextView) findViewById(R.id.tv_title);
        textdemo = (TextView) findViewById(R.id.textdemo);
        button = (Button) findViewById(R.id.button);
        listview = (ListView) findViewById(R.id.listview);
        listview.setAdapter(new MyAdapter(this));
        scrollview = (NotifyingScrollView) findViewById(R.id.scrollview);
        //始终位于最顶部
        scrollview.smoothScrollTo(0,0);

        //初始化标题栏相关的色值,为透明
        topbar.getBackground().setAlpha(0);
        tv_title.setTextColor(Color.argb(0, 255, 255, 255));
        textdemo.setBackgroundColor(Color.argb(0, 255, 255, 255));

        scrollview.setOnScrollChangedListener(new NotifyingScrollView.OnScrollChangedListener() {
            @Override
            public void onScrollChanged(ScrollView who, int l, int t, int oldl,
                                        int oldt) {
                //滑动改变标题栏的透明度和文字透明度,图标
                if (topimage == null) {
                    return;
                }
                if(t < 0){
                    return;
                }

                //置顶操作
                if (t > scrollview.getHeight()/2){

                    button.setVisibility(View.VISIBLE);
                    button.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            scrollview.smoothScrollTo(0,0);
                        }
                    });

                }else {

                    button.setVisibility(View.GONE);

                }

                //获取滑动高度,做出对顶部导航栏的操作

                int lHeight = 2*(topbar.getHeight());

                if (t <= lHeight) {

                    int progress = (int) (new Float(t) / new Float(lHeight) * 255);
                    topbar.getBackground().setAlpha(progress);
                    tv_title.setTextColor(Color.argb(progress, 255, 255, 255));
                    textdemo.setBackgroundColor(Color.argb(progress, 240, 240, 240));
                    iv_back.setImageResource(R.mipmap.icon_back_normal);

                } else {

                    topbar.getBackground().setAlpha(255);
                    tv_title.setTextColor(Color.argb(255, 255, 255, 255));
                    textdemo.setBackgroundColor(Color.argb(255, 232, 232, 232));
                    iv_back.setImageResource(R.mipmap.icon_back_pressed);


                }

            }
        });

    }

}

activity_main 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="#ffffff"
    android:orientation="vertical" >

    <com.example.administrator.scrolltable.NotifyingScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/topimage"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/aa10227a" />

            <ListView
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:layout_below="@+id/topimage"
                android:id="@+id/listview">

            </ListView>

        </RelativeLayout>
    </com.example.administrator.scrolltable.NotifyingScrollView>

    <RelativeLayout
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#66cc99" >

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:src="@mipmap/icon_back_normal" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="我的"
            android:textColor="#fff000" />

        <TextView
            android:id="@+id/textdemo"
            android:layout_width="match_parent"
            android:layout_height="0.1dp"
            android:layout_alignParentBottom="true"
            android:textColor="#f0f0f0"
            />
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="回到顶部"
            android:id="@+id/button"
            android:visibility="gone"
            />
    </RelativeLayout>

</RelativeLayout>

自定义 Scroll View 命名: NotifyingScrollView;

package com.example.administrator.scrolltable;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ScrollView;

/**
 * 作者: yzp on 2016-10-09.
 * 邮箱: 15111424807@163.com
 * QQ: 486492302
 *
 * 重写scrollview,以实现滑动效果
 */
public class NotifyingScrollView extends ScrollView implements View.OnTouchListener {

    // 记录首次按下位置
    private float mFirstPosition = 0;
    // 是否正在放大
    private Boolean mScaling = false;
    private View dropZoomView;
    private int dropZoomViewWidth;
    private int dropZoomViewHeight;

    private boolean mDisableEdgeEffects = true;

    public interface OnScrollChangedListener {
        void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
    }

    private OnScrollChangedListener mOnScrollChangedListener;

    public NotifyingScrollView(Context context) {
        super(context);
    }

    public NotifyingScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NotifyingScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedListener != null) {
            mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);
        }
    }

    public void setOnScrollChangedListener(OnScrollChangedListener listener) {
        mOnScrollChangedListener = listener;
    }

    @Override
    protected float getTopFadingEdgeStrength() {
        if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
            return 0.0f;
        }
        return super.getTopFadingEdgeStrength();
    }

    @Override
    protected float getBottomFadingEdgeStrength() {
        if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
            return 0.0f;
        }
        return super.getBottomFadingEdgeStrength();
    }

    //下拉放大效果处理
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        init();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }
    private void init() {
        setOverScrollMode(OVER_SCROLL_NEVER);
        if (getChildAt(0) != null) {
            ViewGroup vg = (ViewGroup) getChildAt(0);
            if (vg.getChildAt(0) != null) {
                dropZoomView = vg.getChildAt(0);
                setOnTouchListener(this);

            }
        }
    }
    /**
     * 下拉头部放大效果
     * @param v
     * @param event
     * @return
     */
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) {
            dropZoomViewWidth = dropZoomView.getMeasuredWidth();
            dropZoomViewHeight = dropZoomView.getMeasuredHeight();
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                //手指离开后恢复图片
                mScaling = false;
                replyImage();
                break;
            case MotionEvent.ACTION_MOVE:
                if (!mScaling) {
                    if (getScrollY() == 0) {
                        mFirstPosition = event.getY();// 滚动到顶部时记录位置,否则正常返回
                    } else {
                        break;
                    }
                }
                int distance = (int) ((event.getY() - mFirstPosition) * 0.6); // 滚动距离乘以一个系数
                if (distance < 0) { // 当前位置比记录位置要小,正常返回
                    break;
                }

                // 处理放大
                mScaling = true;
                setZoom(1 + distance);
                return true; // 返回true表示已经完成触摸事件,不再处理
        }
        return false;
    }

    // 回弹动画 (使用了属性动画)
    public void replyImage() {
        final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth;

        // 设置动画
        ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7));

        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float cVal = (Float) animation.getAnimatedValue();
                setZoom(distance - ((distance) * cVal));
            }
        });
        anim.start();

    }

    //缩放
    public void setZoom(float s) {
        if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) {
            return;
        }
        ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams();
        //此处不处理头部某一边变宽
//        lp.width = (int) (dropZoomViewWidth + s);
        lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth));
        dropZoomView.setLayoutParams(lp);
    }

}

listview Item文件 以及适配器:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:id="@+id/text_up"
        android:textSize="18sp"
        android:text="上滑啦"/>

</LinearLayout>

适配器:

package com.example.administrator.scrolltable;

import android.content.Context;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

/**
 * 作者:Yzp on 2016-10-11 17:38
 * 邮箱:15111424807@163.com
 * QQ: 486492302
 */
public class MyAdapter extends BaseAdapter {

    Context context;

    public MyAdapter(Context context) {
        // TODO Auto-generated constructor stub
        this.context=context;
    }

    @Override
    public int getCount() {
        return 15;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View  vi = convertView;
        vi = vi.inflate(context, R.layout.listview_text, null);
        return vi;
    }
}

好了,运行下就会出现想要的效果了,捧场的点个赞 哈哈……


效果图:
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值