Tablayout + viewpager

最新推荐文章于 2025-05-13 16:59:38 发布

原创最新推荐文章于 2025-05-13 16:59:38 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Tablayout + viewpag

本文介绍如何使用 Android Support Design 库中的 TabLayout 控件，并结合 ViewPager 实现新闻应用的标签切换效果。文中详细展示了依赖导入、布局配置、逻辑编程及自定义适配器等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步: 导依赖

compile "com.android.support:design:24.1.1"

第二步布局

 <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@color/colorPrimary"
        app:tabGravity="center"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="4dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabTextColor="@color/colorAccent">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_below="@+id/tabLayout"
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ></android.support.v4.view.ViewPager>

第三步: main 里逻辑编程

public class MainActivity extends AppCompatActivity {
    private  TabLayout a;
    private List<String> list;
    private ViewPager vp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        a= (TabLayout) findViewById(R.id.tabLayout);
        vp= (ViewPager) findViewById(R.id.vp);

        list=new ArrayList<>();
        list.add("头条");
        list.add("社会");
        list.add("国内");
        list.add("国际");
        list.add("娱乐");
        list.add("体育");
        list.add("军事");
        list.add("科技");
        list.add("财经");
        list.add("时尚");


        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
                @Override
            public CharSequence getPageTitle(int position) {
                return list.get(position);
            }

            @Override
            public Fragment getItem(int position) {

                NewsFragment ooopp = new NewsFragment();
                Bundle bundle = new Bundle();
                if (list.get(position).equals("头条")){
                    //fragment = new TouTiaoFragment();
                    bundle.putString("name","top");
                }else if (list.get(position).equals("社会")){
                    bundle.putString("name","shehui");
                }else if (list.get(position).equals("国内")){
                    bundle.putString("name","guonei");
                }else if (list.get(position).equals("国际")){
                    bundle.putString("name","guoji");
                }else if (list.get(position).equals("娱乐")){
                    bundle.putString("name","yule");
                }else if (list.get(position).equals("体育")){
                    bundle.putString("name","tiyu");
                }else if (list.get(position).equals("军事")){
                    bundle.putString("name","junshi");
                }else if (list.get(position).equals("科技")){
                    bundle.putString("name","keji");
                }else if (list.get(position).equals("财经")){
                    bundle.putString("name","caijing");
                }else if (list.get(position).equals("时尚")){
                    bundle.putString("name","shishang");
                }
                ooopp.setArguments(bundle);
                return ooopp;
            }
            @Override
            public int getCount() {
                return list.size();
            }
        });
       a.setupWithViewPager(vp);
    }

第四步:创建NewsFragment类继承Fragment

package com.example.tadloyout;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.google.gson.Gson;
import android.support.v4.app.Fragment;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

import java.net.HttpURLConnection;


import java.net.MalformedURLException;
import java.net.ProtocolException;
import java.net.URL;

import java.util.List;


/**
 * Created by lenovo on 2017/9/13.
 */

public class NewsFragment extends Fragment{

    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(msg.what==0){
                DataDataBean dataBean= (DataDataBean) msg.obj;
                data = dataBean.getResult().getData();
                Log.i("pppp",data.toString());

                MyAdapter myAdapter=new MyAdapter(getActivity(),data);
                lv.setAdapter(myAdapter);
            }
        }
    };

    private ListView lv;
    private List<DataDataBean.ResultBean.DataBean> data;

    @Override
    public View onCreateView(LayoutInflater inflater,  ViewGroup container, Bundle savedInstanceState) {
       View view=inflater.inflate(R.layout.item,container,false);
        lv = (ListView) view.findViewById(R.id.lv);
        Bundle bundle = getArguments();
        String string = bundle.getString("name", "top");

        getDataFromNet(string);
        return view;
    }

    //请求网络数据
    private void getDataFromNet(final String string) {

        new Thread(){
            @Override
            public void run() {
                String path = "http://v.juhe.cn/toutiao/index?type="+string+"&key=597b4f9dcb50e051fd725a9ec54d6653";
                Log.i("pppp",path);
                try {
                    URL url=new URL(path);
                    HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
                    urlConnection.setRequestMethod("GET");
                    urlConnection.setReadTimeout(5000);
                    urlConnection.setConnectTimeout(5000);
                    int responseCode = urlConnection.getResponseCode();
                    if (responseCode == 200){
                        Log.i("pppp",responseCode+"");
                        InputStream inputStream = urlConnection.getInputStream();

                        String json = streamToString(inputStream,"utf-8");
                        Log.i("pppp",json);
                        Gson gson=new Gson();
                        DataDataBean fromJson = gson.fromJson(json, DataDataBean.class);
                        Message message=Message.obtain();
                        message.what=0;
                        message.obj=fromJson;
                        handler.sendMessage(message);
                    }
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (ProtocolException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                super.run();
            }
        }.start();





    }


    private String streamToString(InputStream inputStream, String s) {

        try {
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, s);
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            StringBuilder builder = new StringBuilder();
            String f=null;
            while((f=bufferedReader.readLine())!=null){
                builder.append(f);
            }
            bufferedReader.close();

            return builder.toString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}

item

<?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">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    android:id="@+id/lv"></ListView>


</LinearLayout>

第五步:创建适配器MyAdapter类

package com.example.tadloyout;

import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;
import java.util.List;

/**
 * Created by lenovo on 2017/9/13.
 */

class MyAdapter extends BaseAdapter{
    Context context;
    List<DataDataBean.ResultBean.DataBean> data;


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

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

    @Override
    public Object getItem(int i) {
        return data.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        Asd asd=null;
        if (view==null){

            Log.i("pppp","aaaaa"+data.toString());
            view = View.inflate(context, R.layout.item2, null);
            asd = new Asd();
            asd.tv=view.findViewById(R.id.tv);
            asd.img=view.findViewById(R.id.img);
           view.setTag(asd);
        }else{

            asd= (Asd) view.getTag();
        }
        asd.tv.setText(data.get(i).getTitle());
        Log.d("pppp",data.get(i).getTitle());
        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.mipmap.ic_launcher)            //加载图片时的图片
                .showImageForEmptyUri(R.mipmap.ic_launcher)         //没有图片资源时的默认图片
                .showImageOnFail(R.mipmap.ic_launcher)              //加载失败时的图片
                .cacheInMemory(true)                               //启用内存缓存
                .cacheOnDisk(true)                                 //启用外存缓存
                .considerExifParams(true)                          //启用EXIF和JPEG图像格式
                .displayer(new RoundedBitmapDisplayer(20))         //设置显示风格这里是圆角矩形
                .build();
         ImageLoader.getInstance().displayImage(data.get(i).getThumbnail_pic_s(),asd.img,options);
        return view;
    }
    class Asd{
        TextView tv;
        ImageView img;
    }
}

item2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv"
        />

    <ImageView
        android:id="@+id/img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/tv"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

创建MyApplic继承Application 加载图片工具类

package com.example.tadloyout;

import android.app.Application;
import android.content.Context;
import android.content.res.Configuration;
import android.os.Environment;


import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

import java.io.File;

import static android.R.attr.path;


public class MyApplic extends Application{

    @Override
    public void onCreate() {
        super.onCreate();
        //初始化IamgeLoader
        //获取sd卡根目录路径
        File files = new File("/sdcard/Rimg");
        initImageLoader(getApplicationContext(),files);
    }
    public static void initImageLoader(Context context,File file) {

        ImageLoaderConfiguration.Builder config = new ImageLoaderConfiguration.Builder(context);
        config.threadPriority(Thread.NORM_PRIORITY - 2);
        config.denyCacheImageMultipleSizesInMemory();
        config.diskCacheFileNameGenerator(new Md5FileNameGenerator());
        config.diskCacheSize(50 * 1024 * 1024); // 50 MiB
        config.tasksProcessingOrder(QueueProcessingType.LIFO);
        config.writeDebugLogs(); // Remove for release app
        config .diskCacheFileCount(50);//配置sdcard缓存文件的数量
        // Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(config.build());
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }
    @Override
    public void onLowMemory() {
        super.onLowMemory();
    }
}