会飞的鱼

奇乐云
首页 » Android » Android 自定义view之实现一个简单的滑动透明渐变标题

Android 自定义view之实现一个简单的滑动透明渐变标题

[1]主代码
package com.example.zidinyikojiang5;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

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

        LinearLayout topBar = (LinearLayout) findViewById(R.id.topBar);
        ScrollChangeHeadView schv = (ScrollChangeHeadView) findViewById(R.id.schv);

        //把标题控件传入 里面进行修改
        schv.setTopBar(topBar);

        schv.setAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return 100;
            }

            @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) {
                TextView tv = new TextView(MainActivity.this);
                tv.setText("+" + position);
                return tv;
            }
        });
    }
}

[2]主布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">


    <com.example.zidinyikojiang5.ScrollChangeHeadView
        android:id="@+id/schv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.example.zidinyikojiang5.ScrollChangeHeadView>

    <LinearLayout
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#12b7f5"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题"
            android:textColor="#fff" />

    </LinearLayout>
</RelativeLayout>

[3]自定义布局代码
package com.example.zidinyikojiang5;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;

/**
 * 滚动渐变顶部条
 * <p/>
 * 1.拿到ListView滚动事件
 * 2.拿到高度变化
 * 3.根据高度变化,设置顶部条的背景
 */
public class ScrollChangeHeadView extends ListView {

    private View viewHead;
    private View topBar;

    public ScrollChangeHeadView(Context context, AttributeSet attrs) {
        super(context, attrs);

        viewHead = LayoutInflater.from(context).inflate(R.layout.scroll_change_head, null);
        //主要是向listView的头部添加布局
        addHeaderView(viewHead);

        setOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }

            //滑动触发
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

                if (topBar != null) {
                    //滚动中
                    int headTop = viewHead.getTop();
                    headTop = Math.abs(headTop);

                    //0-255  0是全透明  255 不透明
                    //高度大于255不修改参数  不然更改透明度
                    if(headTop<=255){
                        topBar.getBackground().setAlpha(headTop);
                    }
                }
            }
        });
    }

    public void setTopBar(View v) {
        topBar = v;
    }

//    /**
//     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
//     */
//    private int dip2px(Context context, float dpValue) {
//        final float scale = context.getResources().getDisplayMetrics().density;
//        return (int) (dpValue * scale + 0.5f);
//    }
}

[5]自定义布局引入的自定义布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#0f0c2f"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是Head"
            android:textColor="#fff" />

    </LinearLayout>

</LinearLayout>

[6]动态效果图
device-2019-03-02-212029.gif

文章如无特别注明均为原创! 作者: 奇乐云, 转载或复制请以 超链接形式 并注明出处 奇乐云-建站源码,网络技术,免空免域,模板主题,电脑软件,超级博客
原文地址《 Android 自定义view之实现一个简单的滑动透明渐变标题》发布于2019-3-2

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册