1. 程式人生 > >高仿京東分類效果(Scroll+Fragment)

高仿京東分類效果(Scroll+Fragment)

實現思路:首先說下佈局,整個是一個橫向的線性佈局,左邊是一個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

實現思路:首先說下佈局,整個是一個橫向的線性佈局,左邊是一個ScrollView,右邊是一個FrameLayout, 在程式碼中動態向ScrollView中新增TextView,然後根據TextView的點選事件使用Fragment替換FrameLayout 首先看下

基於vue2+nuxt構建的仿餓了麽2018版

case 開發 targe 謝謝 註意 utf-8 def 快速 sets 前言 高仿餓了麽,以nuxt作為vue的服務端渲染,適合剛接觸或者準備上vue ssr的同學參考和學習 項目地址如遇網絡不佳,請移步國內鏡像加速節點 效果演示 查看demo請戳這裏(請用chrome

基於vue2+nuxt構建的仿餓了麼2018版

前言 高仿餓了麼,以nuxt作為vue的服務端渲染,適合剛接觸或者準備上vue ssr的同學參考和學習 專案地址如遇網路不佳,請移步國內映象加速節點 效果演示 檢視demo請戳這裡(請用chrome手機模式預覽) 移動端掃描下方二維碼 API介面文件 介面文件地址(基於apidoc) 技術棧 vue2 +

Android 之仿京東分類原理listview+fragment

1.寫一個fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android

vue省市區三級聯動仿京東

destroy 傳參 sla solid 列表 git type tom ott 該栗子是我直接從公司的項目單獨拉出來的(懶得重新寫一次了),所以代碼會有些冗余,下面直接看效果: 接著上代碼: html: <template> <div>

recyclerview+viewpager實現多分類fragment介面 仿京東分類介面

好久沒寫部落格了,今天決定寫一篇簡單的功能實現熱熱手 這是我2018年10月份在京東app錄製的他們的分類介面,今天主要就是實現這樣的一個分類的介面 整理思路 首先整理思路啊。整體介面的實現方式可能很多,但是需要儘可能的用簡單的方式,比如左邊的分類介面和右邊的

android仿京東快報垂直迴圈滾動新聞欄

京東的垂直滾動新聞欄的實現原理: 就是一個自定義的LinearLayout,並且textView能夠迴圈垂直滾動,而且條目可以點選,顯示區域最多顯示2個條目,並且還有交替的屬性垂直移動的動畫效果,通過執行緒來控制滾動的實現。 不多說看效果:

Android仿京東淘寶商品列表佈局切換效果

商品列表佈局切換效果很常見,因為淘寶京東有的介面下面很多公司都會給風模仿 當然,我們公司也不例外,最近版本更新添加了這個功能; 在專案中直接使用RecyclerView實現切換功能; 如果不瞭解RecyclerView的可以先看下:  RecyclerView使用詳解

Android 實現仿iOS桌面效果之可拖動的GridView

     最近專案中遇到一個LIstview的拖動效果,github上一搜發現有叫DragListview的開源專案,然後自己再小手一搜拖動排序的GridView,卻沒發現什麼很全很好的開源專案,後

基於React Native構建的仿京東客戶端如何實現首頁 分類 發現 購物車 我的 Tab導航頁面

新建4個用紅色方框標識的檔案,如下圖所示:myths-Mac:JdApp myth$ yarn add react-native-tab-navigatorCartPage.js檔案完整的程式碼如下:import React, { Component } from 'reac

RecyclerView二級聯動,仿京東分類介面

今天我們一起探討一下通過RecyclerView實現二級聯動,在這裡我做的是仿京東的分類頁面,京東的分類頁面是一個非常經典的專案,今天我們就來寫一下. 首先,第一步:搭建環境(依賴和許可權) 在這裡首先看一下所需依賴:在這裡圖片的記載我使用的是Glide /*android5.0的新特

使用Recyclerview實現仿京東分類

主佈局 ​​​​ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   &n

仿京東分類

僅作備忘。 分類頁面: public class ClassActivity extends AppCompatActivity { private String childrenURL = "http://www.zhaoapi.cn/product/getP

Android 仿京東分類頁面

activity_main <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

Android之仿京東APP首頁“京東快報”自動向上滾動的廣告條

##前言 上次在京東APP上買東西時,發現首頁中間有塊叫“京東快報”的欄目,其中廣告條能自動向上滾動,效果還不錯,看到這個效果,第一個念頭就是我能不能實現,於是就誕生了這篇文章。 我們看看實現後的效果: ##實現原理 起初看到這個效果時,第一個想法就是向上移

Android仿京東購物車效果

模仿京東購物車做了個簡單的購物車效果。 先上圖: 最近要做個電商專案。 本來想去網上找個程式碼copy的。 找了半天沒找到。 無奈只能自己寫一個了。 說下整個思路,兩個Listview,item的加減用回撥或者觀察者模式(哈哈,新學的).。 看自己怎麼

手把手教你打造一個仿雷達掃描效果仿水波紋中心擴散效果

高仿雷達掃描效果和仿水波紋中心擴散效果,手把手教你擼一個炫酷的自定義view。我們先看效果圖吧對於仿水波紋中心擴脈衝效果思路大家一看就應該知道,一張圖片在不斷的放大,且顏色漸變。那不就是自定義屬性動畫嗎沒錯就是這麼神奇。ScaleAnimation+AlphaA

微信小程式日記——仿知乎日報

該小程式的作者是Oopsguy,我也參與小功能的開發和完善,希望大家能支援一下 本人對知乎日報是情有獨鍾,看我的部落格和github就知道了,寫了幾個不同技術型別的知乎日報APP 要做微信小程式首先要對html,css,js有一定的基礎,還有對微信小

Android 仿知乎日報1

個人蠻喜歡沒事看看知乎的,前陣子湊巧也在網上搜到了知乎日報的API,詳情見某位開發者在Github上的分享:知乎日報 API 分析 靠著這個,我就做了一個高仿知乎日報的小應用 動態圖看起來不怎麼流暢,其實真機執行的話還是很流程的,畢竟這只是一個純

Android仿微信搜尋,Recyclerview+關鍵字動態匹配篩選變色效果Edittext+Recyclerview

一、概述   我們要實現的是模仿微信的搜尋效果,通過監聽Edittext中文字的變化動態匹配Recyclerview列表中文字,重新整理列表,並將關鍵字變色顯示。   首先上圖,展示我們將要實現的效果(關鍵字是有顏色變化的,列表也有重新整理。我們的gif圖