Android使用Scroll+Fragment仿京东分类效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

实现思路:首先说下布局,整个是一个横向的线性布局,左边是一个ScrollView,右边是一个FrameLayout,在代码中动态向ScrollView中添加TextView,然后根据TextView的点击事件使用Fragment替换FrameLayout

首先看下布局:

<LinearLayout 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"
  android:orientation="horizontal"
  tools:context="www.jdsort.com.jdsort.MainActivity"> 

  <ScrollView
    android:id="@+id/scrollview"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:scrollbars="none">
    <LinearLayout
      android:id="@+id/linearlayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center_horizontal"
      android:orientation="vertical" />
  </ScrollView> 

  <FrameLayout
    android:id="@+id/framelayout"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3"/>
</LinearLayout>

MainActivity代码:

public class MainActivity extends FragmentActivity implements View.OnClickListener { 

  private String[] titles={"常用分类","潮流女装","品牌男装","内衣配饰","家用电器","手机数码","电脑办公","个护化妆","母婴频道","食物生鲜","酒水饮料","家居家纺","整车车品","鞋靴箱包","运动户外","图书","玩具乐器","钟表","居家生活","珠宝饰品","音像制品","家具建材","计生情趣","营养保健","奢侈礼品","生活服务","旅游出行"};
  private ScrollView mScrollView;
  private FrameLayout mFrameLayout;
  //装装ScrollView的item的TextView的数组
  private TextView[] textViewArray;
  //装ScrollView的item的数组
  private View[] views;
  Context context;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    context=this; 

    textViewArray=new TextView[titles.length];
    views=new View[titles.length]; 

    initView(); 

    getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,new FragmentOne()).commit();
  } 

  private void initView() {
    mScrollView= (ScrollView) findViewById(R.id.scrollview);
    addView();
    changeTextColor(0); 

    mFrameLayout= (FrameLayout) findViewById(R.id.framelayout); 

  } 

  /**
   * 给ScrollView添加子View
   */
  private void addView() {
    LinearLayout mLinearLayout= (LinearLayout) findViewById(R.id.linearlayout); 

    View view;
    for(int x=0;x<titles.length;x++){
      view = View.inflate(this, R.layout.item_scrollview, null);
      view.setId(x);
      view.setOnClickListener(this);
      TextView tv= (TextView) view.findViewById(R.id.textview);
      tv.setText(titles[x]);
      mLinearLayout.addView(view); 

      textViewArray[x]=tv;
      views[x]=view; 

    }
  } 

  @Override
  public void onClick(View v) {
    ToastUtils.showToast(this,titles[(int) v.getId()]);
    changeTextColor((int) v.getId());
    changeTextLocation((int) v.getId()); 

    Fragment fragment=null; 

    switch (v.getId()){
      case 0:
        fragment=new FragmentOne();
        break;
      case 1:
        fragment=new Fragment1();
        break;
      case 2:
        fragment=new Fragment2();
        break;
      case 3:
        fragment=new Fragment3();
        break;
      case 4:
        fragment=new Fragment4();
        break;
      case 5:
        fragment=new Fragment5();
        break;
      case 6:
        fragment=new Fragment6();
        break;
      case 7:
        fragment=new Fragment7();
        break;
    }
    if(fragment!=null){
      getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,fragment).commit();
    }
  }
  /**
   * 改变textView的颜色
   * @param id
   */
  private void changeTextColor(int id) {
    for (int i = 0; i < textViewArray.length; i++) {
      if(i!=id){
        textViewArray[i].setBackgroundResource(android.R.color.transparent);
        textViewArray[i].setTextColor(0xff000000);
      }else {
        textViewArray[id].setBackgroundResource(android.R.color.white);
        textViewArray[id].setTextColor(0xffff5d5e);
      }
    } 

  } 

  /**
   * 改变栏目位置
   */
  private void changeTextLocation(int index) { 

    //views[clickPosition].getTop()针对其父视图的顶部相对位置
    int x = (views[index].getTop() - mScrollView.getHeight() / 2);
    mScrollView.smoothScrollTo(0, x);
  } 

} 

源码等上传上去会再次发布链接,如果那里写的不好,欢迎私信,评论指导

源码下载:Scroll+Fragment仿京东分类效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android仿京东分类模块左侧分类条目效果
  • Android 仿京东、拼多多商品分类页的示例代码
  • Android实现网易Tab分类排序控件实现
  • Android使用分类型RecyclerView仿各大商城首页
  • Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
  • android使用 ScrollerView 实现 可上下滚动的分类栏实例
  • Android 仿网易新闻客户端分类排序功能
  • Android学习教程之分类侧滑菜单(5)
  • Android实现qq列表式的分类悬浮提示
  • Android实现京东App分类页面效果
(0)

相关推荐

  • Android实现网易Tab分类排序控件实现

    先看看效果图: 1.XML布局引入 <com.net168.lib.SortTabLayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="wrap_content" /> 2.设置数据源数据,也就是每个item的对应文本数据 //构造数据源,暂时仅支持String List<String> data

  • Android实现京东App分类页面效果

    今天群里有人问了关于仿京东App分类页面的实现,而我之前正好查过这方面的资料,手上正好有一个demo,正好分享给大家看看,个人觉得效果棒棒哒! 首先来看效果图吧 是不是很6呢,来分析这个demo的主体构成吧,顶部为搜索栏,左侧是scroview,不要担心优化问题,因为scroview里面的TextView是动态生成的,完全不用担心优化问题,右侧是viewPager,Scroview可以控制viewPager的滑动,反之ViewPager也可以控制scroview的滑动. 闲话少说,直接上代码:

  • Android学习教程之分类侧滑菜单(5)

    本文实例为大家分享了Android分类侧滑菜单的制作方法,供大家参考,具体内容如下 classificmenuActivity.java代码: package com.siso.crazyworld; import android.animation.Animator; import android.content.res.Configuration; import android.graphics.Color; import android.graphics.drawable.BitmapDr

  • Android仿京东分类模块左侧分类条目效果

    本文实例为大家分享了Android仿京东左侧分类条目效果的具体代码,供大家参考,具体内容如下 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import com.frame.R;

  • Android实现qq列表式的分类悬浮提示

    效果图: 这种效果的实现这里是采用自定义ExpandableListView,给它设置一个指示布局,在滑动过程中监听当前是否应该悬浮显示分类来实现的.今天抽时间,整理了下代码,记录一下使用过程,以便有类似的需求的时候可以快速搞定. 话不多说,我们直接看代码和使用方法. 一 项目结构 上边儿三个类分别是我们的自定义ExpandableListView,主界面,以及ExpandableListView使用的Adapter.下边儿几个xml文件分别是主界面布局,指示器布局,ExpandableList

  • android使用 ScrollerView 实现 可上下滚动的分类栏实例

    如果不考虑更深层的性能问题,我个人认为ScrollerView还是很好用的.而且单用ScrollerView就可以实现分类型的RecyclerView或ListView所能实现的效果. 下面我单单从效果展示方面考虑,使用ScrollerView实现如下图所示的可滚动的多条目分类,只是为了跟大家一起分享一下新思路.(平时:若从复用性等方面考虑,这显然是存在瑕疵的~) 特点描述: 1.可上下滚动 2.有类似于网格布局的样式 3.子条目具有点击事件 刚看到这个效果时,首先想到的是使用分类型的Recyc

  • Android使用分类型RecyclerView仿各大商城首页

    **正所谓,一入商城深似海~ 商城类的App,确实是有许多东西值得学习,但是只要略微斟酌一下,你又会发现,它们之间存在着许多不谋而合的相似,也就是所谓的雷同~既然如此,让我们也来接下地气,先从一个简单的首页做起吧~** 实现的效果如下图: 1.大布局就是一个简单的RecyclerView: 也可以通过添加多个header实现 4.这里我仅以四种类型为例 /** * 4种类型 */ /** * 类型1:黑色星期五--使用banner实现 */ public static final int BLA

  • Android 仿网易新闻客户端分类排序功能

    先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好 gridviewsort.gif 如何实现拖拽一个Item 用WindowManager添加一个ImageView,并且将这个ImageView的显示图片设置成被拖拽item的截图,截图可以通过View的getDrawingCache获得.拖拽的时候,隐藏原始的item.处理触摸事件的ActionMove,调整ImageView的位置,跟随手指移动.在ActionUp的时候removeView GridView @Override

  • Android 仿京东、拼多多商品分类页的示例代码

    最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取. 先放一个写完之后的样子: 写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果.右边的listView再嵌套一个GridView即可.如下图所示. 所以,我们需要的数据结构也就确定了,应该是数组套数组,也就说护肤大分类下又有子分类商品,类似于这个样子: ok,数据和UI结构确定了,就可以

  • Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

    本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图:   主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

随机推荐