HorizontalScrollView＋viewpager 实现新闻客户端头条

最新推荐文章于 2019-07-23 20:31:34 发布
最新推荐文章于 2019-07-23 20:31:34 发布
阅读量425 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoxiaoshan_3/article/details/70048852
版权

1：布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include
        android:id="@+id/include"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        layout="@layout/includ">
    </include>
    <HorizontalScrollView
        android:id="@+id/horizontalscrollView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:scrollbars="none"
       >
        <LinearLayout
            android:id="@+id/ll_titles"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"></LinearLayout>
    </HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>
fragment.xml布局 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    android:orientation="vertical">
<ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></ListView>
</LinearLayout>
includ.xml布局 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    >
<TextView
    android:id="@+id/texttitle"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:text="今日头条"
    android:textSize="36sp"
    android:gravity="center"
    android:background="#df1414"/>
</LinearLayout>
list_item.xml布局 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_weight="3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="山西"
            android:textSize="36sp"/>
        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="内容"
            android:textSize="16sp"/>
    </LinearLayout>
<ImageView
    android:id="@+id/image"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>
</LinearLayout>
title_item.xml布局 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    android:orientation="vertical">
<TextView
    android:id="@+id/tv_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="26sp"
    android:text="呵呵"
    android:gravity="center_horizontal"/>
    <TextView
        android:id="@+id/tv_indicator"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="#ff0000"/>
</LinearLayout>
2：MainActivity 
package com.example.a1.zhaoshan20170410;
import android.graphics.Color;
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.os.Bundle;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import fragment.NewsFragment;

public class MainActivity extends FragmentActivity implements View.OnClickListener {
    private LinearLayout mLltitles;
    private ViewPager mViewPager;
    private HorizontalScrollView mScrollView;
    //定义要展示的内容
    private String[]titleArray = new String[]{"推荐","热点","视频","北京","社会",
    "图片","科技","汽车","体育","头条"};
    //把URL的值写入集合
    private String[]typeArray =new String[]{"gj","ss","cj","kj",
    "js","ty","yl","gn","shehui","tt"};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        initview();
        initViewpagerIndicator();
        initviewpager();
    }

    private void initviewpager() {
    mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            //获取fragmen并传参数
            return NewsFragment.getInstance(typeArray[position]);
        }

        @Override
        public int getCount() {
            return titleArray.length;
        }
    });
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
              //让顶部指示器跟着动
                for(int i=0;i<mLltitles.getChildCount();i++){
                    View childAt = mLltitles.getChildAt(i);
                    TextView tv_title = (TextView) childAt.findViewById(R.id.tv_title);
                    TextView tv_indicator= (TextView) childAt.findViewById(R.id.tv_indicator);
                if(i==position){
                    //切换颜色
                    tv_indicator.setVisibility(View.VISIBLE);
                    tv_title.setTextColor(Color.RED);
                    //点击条目时，viewpager切换页面
                    mViewPager.setCurrentItem(i);
                }else {
                    tv_indicator.setVisibility(View.GONE);
                    tv_title.setTextColor(Color.BLACK);
                }
                }
                //拿到当前条目的位置,让HorizontalScrollView跟着动,
                  mLltitles.scrollTo((int)mLltitles.getChildAt(position).getX(), 0);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initViewpagerIndicator() {
        //定义布局参数，设置标题条目是包裹内容
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        //设置外边距
        layoutParams.setMargins(10,5,10,5);
        //动态的为线性布局添加view条目
        for (int i=0;i<titleArray.length;i++){
            View view = View.inflate(this, R.layout.title_item, null);
            TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
            tv_title.setText(titleArray[i]);
            TextView tv_indicator = (TextView) view.findViewById(R.id.tv_indicator);
            if(i==0){
                tv_title.setTextColor(Color.RED);
              tv_indicator.setVisibility(View.VISIBLE);
            }else {
                tv_title.setTextColor(Color.BLACK);
                tv_indicator.setVisibility(View.GONE);
            }
            view.setOnClickListener(this);
            mLltitles.addView(view,layoutParams);
        }
    }

    private void initview() {
        mScrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mLltitles = (LinearLayout) findViewById(R.id.ll_titles);
    }

    @Override
    public void onClick(View v) {
        //字体颜色变，indicator显示隐藏，viewpager选中某一个对应的界面
        for(int i=0;i<mLltitles.getChildCount();i++){
            View childAt = mLltitles.getChildAt(i);
            TextView tv_title = (TextView) childAt.findViewById(R.id.tv_title);
            TextView tv_indicator= (TextView) childAt.findViewById(R.id.tv_indicator);
            if(v==childAt){
             //切换颜色
                tv_indicator.setVisibility(View.VISIBLE);
                tv_title.setTextColor(Color.RED);
                //点击条目时，viewpager切换页面
                mViewPager.setCurrentItem(i);
            }else {
                tv_indicator.setVisibility(View.GONE);
                tv_title.setTextColor(Color.BLACK);
            }
        }
    }
}

3：NewsFragment
package fragment;

import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.a1.zhaoshan20170410.R;
import com.google.gson.Gson;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;

import adapter.MyAdapter;
import bean.MyBean;
import utils.MyXutils;

/**
 * data:2017/4/10
 * author:
 * function:
 */

public class NewsFragment extends Fragment {

    private View mView;
    String path ="http://result.eolinker.com/k2BaduF2a6caa275f395919a66ab1dfe4b584cc60685573?uri=";
    private ListView mLv;
    private List<MyBean.ResultBean.DataBean> mDatalist;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mView = inflater.inflate(R.layout.fragment, null);
        initview();
        return mView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //获取传过来的数据
        String type = getArguments().getString("type");
        String url = path + type;
        MyXutils myXutils=new MyXutils(getActivity(),mLv);
        myXutils.getXutil(url);
//        AsyncTask<String,Integer,String>asyncTask = new AsyncTask<String, Integer, String>() {
//
//            @Override
//            protected String doInBackground(String... params) {
//                try {
//                    URL url = new URL(params[0]);
//                    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
//                    connection.setConnectTimeout(3000);
//                    connection.setReadTimeout(3000);
//                    connection.setRequestMethod("GET");
//                    int code = connection.getResponseCode();
//                    if (code==200){
//                        InputStream inputStream = connection.getInputStream();
//                        BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream,"utf-8"));
//                        StringBuilder builder = new StringBuilder();
//                        String str;
//                        while ((str=reader.readLine())!=null){
//                            builder.append(str);
//                        }
//                        return builder.toString();
//                    }
//                } catch (Exception e) {
//                    e.printStackTrace();
//                }
//                return null;
//            }
//
//            @Override
//            protected void onPostExecute(String s) {
//                super.onPostExecute(s);
//                //解析json
//                Gson gson = new Gson();
//                MyBean bean = gson.fromJson(s, MyBean.class);
//                //进行展示
//                mDatalist = bean.getResult().getData();
//                mLv.setAdapter(new MyAdapter(mDatalist,getActivity()));
//            }
//        };
//        asyncTask.execute(url);
    }

    private void initview() {
        mLv = (ListView) mView.findViewById(R.id.listview);
    }

    public static NewsFragment getInstance(String type){
       NewsFragment newsFragment = new NewsFragment();
        Bundle bundle = new Bundle();
        bundle.putString("type",type);
        newsFragment.setArguments(bundle);
        return newsFragment;
    }
}

4：MyXutils
package utils;

import android.content.Context;
import android.util.Log;
import android.widget.ListView;
import com.google.gson.Gson;
import org.xutils.common.Callback;
import org.xutils.http.RequestParams;
import org.xutils.x;

import java.util.List;

import adapter.MyAdapter;
import bean.MyBean;

public class MyXutils {

    private Context context;
    private ListView mLv;
  private List<MyBean.ResultBean.DataBean> mDatalist;


    public MyXutils(Context context, ListView lv) {
        this.context = context;
        mLv = lv;
    }

    public  void  getXutil(String uri){
        RequestParams params = new RequestParams(uri);//params.addQueryStringParameter("num","10");
        //System.out.println(params);
        Log.d("zzz",params.toString());
        x.http().get(params, new Callback.CommonCallback<String>() {
            public void onSuccess(String result) {
               // System.out.println(result);
                Gson gson=new Gson();
                MyBean bean = gson.fromJson(result, MyBean.class);
                mDatalist = bean.getResult().getData();
               mLv.setAdapter(new MyAdapter(mDatalist,context));
            }

            @Override
            public void onError(Throwable ex, boolean isOnCallback) {

            }

            @Override
            public void onCancelled(CancelledException cex) {

            }

            @Override
            public void onFinished() {

            }

        });
    }
}

5：MyApplication
package utils;

import android.app.Application;

import org.xutils.x;

public class MyApplication extends Application{

    @Override
    public void onCreate() {
        super.onCreate();
        x.Ext.init(this);
        x.Ext.setDebug(false);
    }

}

6：MyAdapter
package adapter;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.a1.zhaoshan20170410.R;

import org.xutils.common.Callback;

import java.util.List;
import org.xutils.common.Callback;
import org.xutils.x;
import bean.MyBean;

import static android.R.id.list;

/**
 * data:2017/4/7
 * author:
 * function:
 */

public class MyAdapter extends BaseAdapter {
    private List<MyBean.ResultBean.DataBean> mDatalist;
    private Context context;

    public MyAdapter(List<MyBean.ResultBean.DataBean> mDatalist, Context context) {
        this.mDatalist = mDatalist;
        this.context = context;
    }

    @Override
    public int getCount() {
        return mDatalist.size();
    }

    @Override
    public Object getItem(int position) {
        return mDatalist.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final ViewHodler hodler;
        if (convertView==null){
            convertView =View.inflate(context, R.layout.list_item,null);
            hodler = new ViewHodler();
            hodler.mImageView = (ImageView) convertView.findViewById(R.id.image);
            hodler.text1 = (TextView) convertView.findViewById(R.id.text);
            hodler.text2 = (TextView) convertView.findViewById(R.id.text2);
            convertView.setTag(hodler);
        }else {
            hodler = (ViewHodler) convertView.getTag();
        }
            hodler.text1.setText(mDatalist.get(position).getTitle());
            hodler.text2.setText(mDatalist.get(position).getAuthor_name());
        x.image().bind(hodler.mImageView,mDatalist.get(position).getThumbnail_pic_s());
        return convertView;
    }
    class ViewHodler{
        ImageView mImageView;
        TextView text1,text2;
    }
}

zhaoxiaoshan_3
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HorizontalScrollView+ViewPager导航栏
yin_chenglong的博客
01-12 288
//主页面 package fragment; import android.graphics.Color; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.su
ViewPager的实现：通过HorizontalScrollView
hi_0123的专栏
10-22 750
我们可以发现，在一些新闻客户端的标题栏中，它们会有很多标题，而这些标题都是可以滑动的，这种效果的实现使用 的就是HorizontalScrollView，我们通过向HorizontalScrollView包含的LinearLayout中动态添加标题，这样无论我们添加 多少标题，它都是可以滑动的。 activity_main.xml: <LinearLayout xmlns:androi
横向滑动菜单：horizontalscrollview+viewpager+Fragment
c_hjf的博客
09-12 718
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private HorizontalScrollView scrollView; private LinearLayout linearLayout; private ViewPager viewPage
导航栏联动效果（ HorizontalScrollView+ViewPager）
01-05
以HorizontalScrollView与Viewpager实现分页滑动，类似淘宝分页滑动效果，其中头部局可以自定义
HorizontalScrollView+viewpager实现仿天天动听ios版和QQ侧边菜单效果
hongdameng的专栏
01-08 1176
最近用HorizontalScrollView弄了个和slidingmenu差不多的效果的侧边菜单，顺便在里面嵌套viewpager，效果类似天天动听ios版和仿QQ侧边菜单栏
横向滚动标题栏(HorizontalScrollView+GridView+ViewPager+自定义适配器)
01-04
实现横向标题滚动界面，相当于一些客户端，今日头条类似，可滑动标题栏，点击标题栏中的标题会改变状态，并且加入ViewPager控件，滑动界面会显示相对应的标题并且改变状态
android HorizontalScrollView+ViewPager布局（viewpage不能滑动）
小牛大帝的专栏
01-18 1122
HorizontalScrollView+ViewPager
HorizontalScrollView与ViewPager组合实现联动仿新浪微博热门微博页面
05-20
HorizontalScrollView通常用于展示可以水平滑动的内容，而ViewPager则常用于实现页面间的滑动切换，两者结合能实现更复杂的布局和交互效果。 **HorizontalScrollView** 是Android SDK提供的一种视图容器，它可以...
Android 实现横向标题栏滚动效果(HorizontalScrollView + GridView + Viewpager + 自定义适配器)
Danielntz的博客
01-04 4509
最近在完成一个新闻客户端项目时，需要做出一个横向标题栏的UI界面，在网上查阅多时，感觉不是很懂，最后自己摸索出来了一种更容易理解，且更加容易的实现方法，废话不多说上图：
HorizontalScrollView和ViewPager的使用
qq_38744847的博客
06-11 397
1.MainActivity 类 import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatAct
HorizontalScrollView 与 viewpager冲突的解决
11-25
HorizontalScrollView中嵌套viewpager的冲突的解决方法
Android仿ViewPager（重写HorizontalScrollView）
11-11
Android重写HorizontalScrollView仿ViewPager效果
HorizontalScrollView实现网页新闻栏目滑动效果
06-05
今天无聊想实现一下网易新闻中栏目滑动的效果，想到了用HorizontalScrollView结合GridView来实现基础的功能：
Android 自定义View修炼-自定义HorizontalScrollView视图实现仿ViewPager效果
weixin_30463341的博客
07-23 191
开发过程中，需要达到 HorizontalScrollView和ViewPager的效果，于是直接重写了HorizontalScrollView来达到实现ViewPager的效果。 实际效果图如下： （1）自定义HorizontalScrollView类：AppHorizontalScrollView实现： package com.czm.ui.view; i...
利用HorizontalScrollView自己写一个viewPager指示器
u013835855的专栏
05-04 2597
目前滑动指示器最著名的是JakeWarton的ViewpagerIndicator，用别人的东西固然方便，但是也带来很多使用上的疑惑，这篇博客，我们使用HorizontalScrollView自己写一个viewPager指示器。 这里首先说一下很多自己写的indicator只限于可视范围内不能移动的指示器，所以tab的数量有限，一般最多五个就已经很拥挤了，可是我们发现开源的ViewpagerIn
HorizontalScrollView里的标签改变颜色（今日头条里的功能仿照）
weixin_30819163的博客
03-21 157
private void selectTab(int position) { // TODO Auto-generated method stub for (int i = 0; i < hori_lin.getChildCount(); i++) { TextView childAt = (TextView) hori_lin.getChildAt(position); /...
Android中使用ViewPager+HorizontalScrollView实现顶部导航栏联动效果
Night_X的博客
06-24 2116
文章目录思路布局情况铺代码主页面布局activity_main.xmlmain_top.xml逻辑代码 思路 布局情况 说明：HorizontalScrollView只能有一个child，且是Linearlayout 铺代码 主页面布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/a...
android中HorizontalScrollView实现viewpager的效果
Langxingtianxi的专栏
07-07 2052
因为工作上的需求，要实现一个翻页的页面，入下图：             刚开始看到这种页面，想过viewpager，不过后来想换别的方式，所以想过gridview，但是gridview无法翻页，所以试了不行。后来想到了HorizontalScrollView这个控件。然后就试了一下，感觉还可以，基本上滑动的功能差不多了，就差翻页的功能，所以就上网查了很多资料。终于查到pageScroll这个
Android HorizontalScrollView实现ViewPager缓存效果的相册教程
本文档介绍了如何在Android应用中利用HorizontalScrollView实现类似ViewPager的功能来创建一个简单的相册。作者提到，虽然HorizontalScrollView本身不具备ViewPager的自动缓存功能，但我们可以借鉴ViewPager的缓存...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值