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

转载请标明出处:,本文出自:【张鸿洋的博客】1、概述

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

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

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

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

360:

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

我们的效果图:

2、使用方式

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

1、自定义id资源文件

values/ids_sticky_nav_Llayout.xml

<?xml version="1.0" encoding="utf-8"?><resources><item name="id_stickynavlayout_topview" type="id"/><item name="id_stickynavlayout_viewpager" type="id"/><item name="id_stickynavlayout_indicator" type="id"/><item name="id_stickynavlayout_innerscrollview" type="id"/></resources>定义了几个id资源,主要是为了方便使用了,供声明布局时使用的,看名字应该能猜出来吧,猜不出来没事,接下来我就贴布局文件了。这个其实不属于使用方式了,但是下文会见到,所以提前贴出来。2、布局文件<com.zhy.view.StickyNavLayout xmlns:tools=""xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RelativeLayoutandroid:id="@id/id_stickynavlayout_topview"android:layout_width="match_parent"android:layout_height="300dp"android:background="#4400ff00" ><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="软件介绍"android:textSize="30sp"android:textStyle="bold" /></RelativeLayout><com.zhy.view.SimpleViewPagerIndicatorandroid: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.ViewPagerandroid: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、MainActivitypackage com.zhy.sample.StickyNavLayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import com.zhy.view.SimpleViewPagerIndicator;public class MainActivity extends FragmentActivity{private String[] mTitles = new String[] { "简介", "评价", "相关" };private SimpleViewPagerIndicator mIndicator;private ViewPager mViewPager;private FragmentPagerAdapter mAdapter;private TabFragment[] mFragments = new TabFragment[mTitles.length];@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();initDatas();initEvents();}private void initEvents(){mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageSelected(int position){}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels){mIndicator.scroll(position, positionOffset);}@Overridepublic void onPageScrollStateChanged(int state){}});}private void initDatas(){mIndicator.setTitles(mTitles);for (int i = 0; i < mTitles.length; i++){mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);}mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return mTitles.length;}@Overridepublic Fragment getItem(int position){return mFragments[position];}};mViewPager.setAdapter(mAdapter);mViewPager.setCurrentItem(0);}private void initViews(){mIndicator = (SimpleViewPagerIndicator) findViewById(R.id.id_stickynavlayout_indicator);mViewPager = (ViewPager) findViewById(R.id.id_stickynavlayout_viewpager);}}没有什么复杂的代码,主要就是初始化我们的Vp;你说只有有缘人才可以取下,我看着你手中的戒指,

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

相关文章:

你感兴趣的文章:

标签云: