Android 自定义控件 轻松实现360软件详情页

最近有不少朋友私聊问应用宝、360软件助手之类的软件详情页怎么做,刚好,最近有时间就模仿360软件助手详情页给大家做个Demo,供大家参考。嗯,关于实现呢,我写了两种方式:

1、ScrollView内嵌软件介绍+ViewPager+ViewPager中是ScrollView,这种方式呢,纯原生,没有涉及到自定义控件,但是这样嵌套呢,涉及到测量以及事件的冲突处理,大家可以自己尝试去做一下,想像起来蛮容易的,做起来其实还是挺费劲的,代码我会给出,核心代码不多,大家自行参考。本文将重点分析第二种方式。

2、将做外层的ScrollView改为了自定义的一个控件,继承自LinearLayout,叫做StickyNavLayout,这里感谢小七的命名,同时本方式感谢二群暖暖提供的源码。

最后看下效果图,第一张是360的,第二张是我们的:

360:

Android 自定义控件 轻松实现360软件详情页

擦,别问我为什么这么模糊,尽力了。。。

我们的效果图:

Android 自定义控件 轻松实现360软件详情页

2、使用方式

上面我们也说了,之所以有第二种方式,完全是为了考虑使用的容易度。

1、自定义id资源文件

values/ids_sticky_nav_Llayout.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<item type="id"/>
    <item type="id"/>
    <item type="id"/>
    <item type="id"/>

</resources>

定义了几个id资源,主要是为了方便使用了,供声明布局时使用的,看名字应该能猜出来吧,猜不出来没事,接下来我就贴布局文件了。这个其实不属于使用方式了,但是下文会见到,所以提前贴出来。

2、布局文件

<com.zhy.view.StickyNavLayout xmlns:tools="http://schemas.Android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<RelativeLayout
        android:id="@id/id_stickynavlayout_topview"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#4400ff00" >

<TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="软件介绍"
            android:textSize="30sp"
            android:textStyle="bold" />
    </RelativeLayout>

<com.zhy.view.SimpleViewPagerIndicator
        android:id="@id/id_stickynavlayout_indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ffffffff" >
    </com.zhy.view.SimpleViewPagerIndicator>

<android.support.v4.view.ViewPager
        android:id="@id/id_stickynavlayout_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#44ff0000" >
    </android.support.v4.view.ViewPager>

</com.zhy.view.StickyNavLayout>

最外层是我们的自定义的控件StickyNavLayout,然后是顶部内容区域,Vp的指示器,ViewPager。按照效果图,去写就ok,注意部分id使用我们预设定的id资源。因为我们的StickyNavLayout需要通过id找到该控件,去进行一些计算。

然后在我们的MainActivity中,对ViewPager进行初始化即可。

3、MainActivity

没有什么复杂的代码,主要就是初始化我们的Vp;

对了这个指示器我是临时写的,也算一个自定义控件吧,主要就是跟随Vp一起移动,详细写法请参考:Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI,见 ,只是把三角形改成了下划线,非本文重点,你可以暂时忽略。

我们的Vp中每个页面为一个Fragment,Fragment的代码我们就不贴了,布局就是ScrollView为根布局,内部随意填充,具体可参考源码。

介绍完了用法有木有一点小激动,基本按照常规去写布局就ok,效果自动实现。

4、Fragment及其布局

贴一下我们的Fragment代码:

package com.zhy.sample.StickyNavLayout;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/3ad01d53e22f3c56cd5518aaee927350.html