Android 悬停标题

最新推荐文章于 2024-07-17 18:24:02 发布
最新推荐文章于 2024-07-17 18:24:02 发布
阅读量166 收藏
点赞数 1
文章标签： Android android studio java android adb kotlin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengyueyao/article/details/138946943
版权

效果图

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:elevation="0dp"
                android:background="@android:color/transparent">

                <LinearLayout
                    android:id="@+id/ll_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_scrollFlags="scroll"
                    app:layout_collapseMode="pin">

                    <!-- Banner -->
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="150dp"
                        android:background="#2CECA9"/>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="15dp"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="15dp"
                            android:orientation="horizontal">

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                            <LinearLayout
                                android:layout_width="0dp"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:layout_height="wrap_content"
                                android:orientation="vertical">

                                <ImageView
                                    android:layout_width="50dp"
                                    android:layout_height="50dp"
                                    android:background="#40B2E6"/>

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:text="标题"/>


                            </LinearLayout>

                        </LinearLayout>

                    </LinearLayout>

                </LinearLayout>

                <!-- 标签指示器 -->
                <net.lucode.hackware.magicindicator.MagicIndicator
                    android:id="@+id/mag_tab"
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:layout_marginTop="15dp" />

            </com.google.android.material.appbar.AppBarLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:orientation="vertical">

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/vp_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="15dp"/>


            </LinearLayout>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

activity代码

class MainActivity :BaseActivity() {
    private lateinit var binding:ActivityMainBinding
    private var titles = mutableListOf("美食","电器","家具","箱包","服饰")
    private var fragments = mutableListOf<Fragment>()
    override fun getLayout(): View? {
        binding = ActivityMainBinding.inflate(layoutInflater)
        return binding.root
    }

    override fun initData() {
        fragments.clear()
        for (i in titles.indices){
            var fragment = TestFragment()
            var bundle = Bundle()
            bundle.putString("title",titles[i])
            fragment.arguments = bundle
            fragments.add(fragment)
        }
        binding.vpList.currentItem = 1
        binding.vpList.adapter = PagerAdapter(supportFragmentManager,fragments,titles)
        initMagicIndicator(binding.vpList,binding.magTab)
    }

    //初始化table
    private fun initMagicIndicator(vpList: ViewPager, tab: MagicIndicator) {
        val commonNavigator = CommonNavigator(this)
        commonNavigator.isAdjustMode = true
        commonNavigator.isSkimOver = true
        commonNavigator.adapter = object : CommonNavigatorAdapter() {
            override fun getCount(): Int {
                return if (titles == null) 0 else titles.size
            }
            override fun getTitleView(context: Context, index: Int): IPagerTitleView {
                val simplePagerTitleView: SimplePagerTitleView =
                    TransitionPagerTitleView(context)
                simplePagerTitleView.text = titles[index]
                simplePagerTitleView.setTextSize(TypedValue.COMPLEX_UNIT_DIP,16f)
                simplePagerTitleView.normalColor = Color.parseColor("#999999")
                simplePagerTitleView.selectedColor = Color.parseColor("#333333")
                simplePagerTitleView.setPadding(14,0,14,0)
                simplePagerTitleView.setOnClickListener { vpList.currentItem = index }
                return simplePagerTitleView
            }

            override fun getIndicator(context: Context): IPagerIndicator {
                val indicator = LinePagerIndicator(context)
                indicator.setColors(Color.parseColor("#40c4ff"))
                indicator.mode = LinePagerIndicator.MODE_EXACTLY
                indicator.lineHeight = UIUtil.dip2px(context, 3.0).toFloat()
                indicator.lineWidth = UIUtil.dip2px(context, 40.0).toFloat()
                indicator.roundRadius = UIUtil.dip2px(context, 3.0).toFloat()
                indicator.startInterpolator = AccelerateInterpolator()
                indicator.endInterpolator = DecelerateInterpolator(2.0f)
                indicator.setColors(Color.parseColor("#FF7D8E"))
                return indicator
            }
        }
        tab.navigator = commonNavigator
        val titleContainer = commonNavigator.titleContainer // must after setNavigator
        titleContainer.showDividers = LinearLayout.SHOW_DIVIDER_MIDDLE
        titleContainer.dividerPadding = UIUtil.dip2px(this, 15.0)
        ViewPagerHelper.bind(tab, vpList)
    }

fragment代码

class TestFragment:BaseFragment() {
    private lateinit var binding:FragTestBinding
    private var adapter = TestAdapter()
    private var list = mutableListOf<String>()
    override fun getLayout(): View? {
        binding = FragTestBinding.inflate(layoutInflater)
        return binding.root
    }

    override fun initData() {
        var title = arguments?.getString("title")
        var layoutManager = LinearLayoutManager(activity)
        layoutManager.orientation = LinearLayoutManager.VERTICAL
        binding.recyList.layoutManager = layoutManager
        binding.recyList.adapter = adapter
        for (i in 0..20){
            list.add("$title")
        }
        adapter.submitList(list)
    }
}

adapter就不贴了   就是普通的adapter不需要任何处理   最主要的是xml布局,其它的内容就是填充布局就好了

需要引入

implementation 'com.google.android.material:material:1.8.0'

LuckTigger
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android官方悬停效果原理,Android之AppBarLayout实现悬停吸附伸缩效果
weixin_32321921的博客
05-25 535
前几天看到这样一个UI效果,然后自己也仿照实现了下:开眼app个人中心.gif看着挺酷的,也有很多App都用到了这个UI效果,比如开眼App和沪江开心词场就用到了.所以下面就来简单实现一下这个UI效果吧.组合三剑客实现上面的UI效果需要将这三剑客的组合起来用,下面先介绍下这三个控件:AppBarLayout:1.AppBarLayout简单介绍AppBarLayout是android.suppor...
Android悬停效果两种
07-08
在给定的标题"Android悬停效果两种"中，我们可以推测将要探讨两种实现此类效果的方法。 第一种方法可能是使用`AppBarLayout`和`CollapsingToolbarLayout`。`AppBarLayout`是Android Design Support Library的一部分...
android标题栏悬停,安卓悬停标题栏
weixin_28887297的博客
05-27 198
xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">android:layout_width="match_parent"android:l...
android 悬停抽屉控件,Android Studio 抽屉效果控件Toolbar+DrawerLayout
weixin_33561009的博客
05-26 464
概念描述一、Toolbar作用:用来替换actionBar,使用前将系统自带的actionBar去掉去actionBar:1.修改清单文件 android:theme="@style/Theme.AppCompat.Light.NoActionBar"2.设置单个页面: onCreate方法中: requestWindowFeture(Window.FEAUTURE_NO_TITLE)代替acti...
Android开发滑动到顶部悬停效果
聪哥的专栏
10-15 9468
之前也出个微博悬停效果，但是它里面是底部是viewpager的，还有它的自定义控件过于复杂。 这次写一个底部就一个recyclerview，算是改良版本。 废话先来看下效果图，是不是你们要的。由于我找不到csdn博客上上传视频的地方，只能上传效果。 第一张：首屏画面 第二张：滑动画面 第三张：滑动留言精选处悬停效果 希望大家能看懂三张图，联想到其中的操作，第三张图的发表
android 二级列表悬停,Android案例分享系列--悬停列表
weixin_36050664的博客
05-25 295
关键：协调布局CoordinatorLayout方法：app:layout_behavior，指定子视图相对于其他视图的行为，当对方的位置发生变化时，本视图的位置也要随之变化应用栏布局AppBarLayout，继承LinearLayout，可将AppBarLayout称作为头部功能：1、支持响应页面主体的滑动行为，即页面在上移或者下移时，AppBarLayout能够捕捉到页面主体的滚动操作2、捕捉...
Android之AppBarLayout实现悬停吸附伸缩效果
2401_84415615的博客
04-30 793
1.AppBarLayout2.CoordinatorLayout3.CollapsingToolbarLayout实现上面的UI效果需要将这三剑客的组合起来用,下面先介绍下这三个控件:AppBarLayout:1.AppBarLayout简单介绍AppBarLayout是包中的支持的控件,继承自LinearLayout,实际上就是一个垂直分布的LinearLayout.父类视图结构如下:public class AppBarLayoutextends LinearLayoutjava.lang.Objec
android安卓通讯录 联动侧滑加搜索加悬停标题
Fe_lone的博客
11-15 434
通讯录 代码地址：https://github.com/BitToNet/FeloneHelper/blob/master/README.md#通讯录 演示 其实这个项目分为三部分，三部分可以独立使用 WaveSideBar（波浪侧边栏） ClearEditText（搜索栏） TitleItemDecoration（分类title） 这个项目用...
Android之AppBarLayout实现悬停吸附伸缩效果(1)
2401_84149213的博客
04-22 477
外链图片转存中…(img-uvEOUDVO-1713787805452)][外链图片转存中…(img-VBVsJo7r-1713787805453)][外链图片转存中…(img-38iEBysu-1713787805454)][外链图片转存中…(img-p72843Sc-1713787805455)][外链图片转存中…(img-DsS1ObiG-1713787805456)]
Android官方悬停效果原理,Android实现悬浮窗体效果
weixin_35794740的博客
05-25 312
突然对悬浮窗体感兴趣，查资料做了个小Demo，效果是点击按钮后，关闭当前Activity，显示悬浮窗口，窗口可以拖动，双击后消失。效果图如下：它的使用原理很简单，就是借用了WindowManager这个管理类来实现的。1.首先在AndroidManifest.xml中添加使用权限：2.悬浮窗口布局实现public class DesktopLayout extends LinearLayout {...
Android listView头部悬停
08-07
"Android listView头部悬停"是一个功能特性，它使得ListView的头部视图在用户滚动列表时保持固定在顶部，这样可以方便用户始终能看到某些关键信息，如导航栏、标题或者过滤选项等。这种设计在许多应用中非常常见，...
Android：SwipeRefreshView嵌套DockingExpandableListView 悬停标题外加上拉刷新下拉加载
11-29
`DockingExpandableListView`是在`ExpandableListView`基础上进行优化的自定义控件，主要特点是实现了悬停标题效果。当用户滚动列表时，当前选中的组头会悬浮在顶部，即使列表滚动，这个标题也会保持可见，提高了...
Android - 吸顶效果，悬停效果
12-12
在Android开发中，吸顶效果（Sticky Header）和悬停效果是常见于滚动视图，如RecyclerView或ListView，为了增强用户体验而设计的一种交互模式。这些效果通常用于创建类似新闻应用、社交媒体应用或者电商应用的分组...
StickyHeaderListView标题渐变、吸附悬停、筛选分类
05-14
在Android开发中，`StickyHeaderListView`是一个增强版的ListView，它提供了许多特性，如标题渐变、吸附悬停和筛选分类等，这些功能能够为用户带来更丰富的交互体验和更好的视觉效果。下面我们将详细探讨这些知识点...
【Android Studio】整合okhttp发送get和post请求（提供Gitee源码）
黄团团的个人博客
07-16 755
本篇博客教学大家如何使用okhttp发送同步/异步get请求和同步/异步post请求，这边博主把代码全部亲自测试过了一遍，需要源码的可以在文章最后自行拉取。
Android Studio引入ndk编译的so库, 通过jni给Java程序使用
Tracker647的博客
07-17 758
工作要求将一个C++老项目的函数用ndk打包成库给安卓同事的java程序调用。自己之前从来没接触过安卓开发，问了老板为什么不让安卓开发来干，老板说安卓开发不懂c++，公司就我一个是懂c++的。。。项目开发年限超过十年，只在32位系统编译过，一些32位可以通过的代码到了64位就不行了，很多的库多少有些兼容问题项目开发环境全程断网，给开发带来诸多不便NDK：Native Development Kit，是 Android 的一个工具开发包。
Android Studio的xml文件的layout布局，在添加属性的过程中，没有自动补全代码问题的解决方案
rimuweinuan_的博客
07-17 210
在build.gradle文件中，把compileSdkVersion和targetSdkVersion两个参数改成32就好了。
ubuntu如何彻底卸载android studio？
最新发布
oushaojun2的专栏
07-17 185
最新版的ubuntu已经使用snap进行软件管理了，我用snap-store安装android studio以后，在安装plugin的时候强制退出后，直接再也进不去了，而且重装snap-store和android studio都不行.
android recyclerview实现滑动悬停
09-02
Android RecyclerView 实现滑动悬停是通过使用 ItemDecoration 来实现的。在 RecyclerView 中滑动悬停需要满足两个条件：一是要有一个能够进行悬停的 View，二是要能够动态地根据 RecyclerView 的滚动来改变悬停 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值