横向滑动导航

//实现在fragment之上
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.astuetz.PagerSlidingTabStrip;



public class Fragment02 extends Fragment {

    private PagerSlidingTabStrip tab;
    private ViewPager vp;
    String[] tabs = {"推荐", "热点", "体育", "娱乐", "社会", "汽车", "教育", "财经", "科技", "游戏"};

    FragmentManager fm;
    private MyVpAdapter adapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment02, container, false);

        tab = view.findViewById(R.id.tabs);
        vp = view.findViewById(R.id.vp);
        fm = getActivity().getSupportFragmentManager();

        adapter = new MyVpAdapter(fm);
        vp.setAdapter(adapter);
        tab.setViewPager(vp);

        return view;
    }

    class MyVpAdapter extends FragmentPagerAdapter {

        public MyVpAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {

            Fragment fragment = null;

            switch (position) {


                case 0:

                    fragment = new ContentFragment();

                    break;
                case 1:

                    fragment = new ContentFragment();

                    break;
                case 2:

                    fragment = new ContentFragment();

                    break;
                case 3:

                    fragment = new ContentFragment();

                    break;
                case 4:

                    fragment = new ContentFragment();

                    break;
                case 5:

                    fragment = new ContentFragment();

                    break;
                case 6:

                    fragment = new ContentFragment();

                    break;
                case 7:

                    fragment = new ContentFragment();

                    break;
                case 8:

                    fragment = new ContentFragment();

                    break;
                case 9:

                    fragment = new ContentFragment();

                    break;


            }

            return fragment;
        }

        @Override
        public int getCount() {
            return tabs.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }
    }

}
 
//解析数据来源
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
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 com.bwie.songjingxue20180108.Beans.Bean2;
import com.bwie.songjingxue20180108.R;
import com.bwie.songjingxue20180108.Utils.NetWorkUtils;
import com.google.gson.Gson;

import java.util.List;


public class ContentFragment extends Fragment {

    private TextView vptv;
    private ListView newslv;
    private String[] urlS = {
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/2",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/3",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/4",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/5",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/6",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/7",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/8",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/9",
            "http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/10"
    };

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.content, container, false);

        vptv = view.findViewById(R.id.vptv);
        newslv = view.findViewById(R.id.newslv);
/*
        Bundle arguments = getArguments();
        String da = arguments.getString("data");*/
        getJson();



        return view;
    }

    public void getJson(){
        new Task().execute(urlS[0]);
    }

    public class Task extends AsyncTask<String,Void,String>{

        @Override
        protected String doInBackground(String... strings) {
            String str = NetWorkUtils.getJsonget(strings[0]);
            return str;
        }

        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            Gson gson = new Gson();
            Bean2 bean2 = gson.fromJson(s, Bean2.class);
            List<Bean2.ResultsBean> resultsBeans =  bean2.getResults();
            vptv.setText(resultsBeans.get(0).getType());


        }
    }
}
//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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/vptv"
        android:textColor="#0f0"
        android:textSize="42sp"
        android:text="123"/>

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


</LinearLayout>

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

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip" />

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

    </android.support.v4.view.ViewPager>

</LinearLayout>


                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5横向滑动导航栏可以通过CSS和JavaScript来实现。 首先,在HTML文件中创建一个`<nav>`标签,并设置一个id属性,例如`id="horizontal-nav"`。在`<nav>`标签中,再创建一个无序列表`<ul>`,作为导航栏的容器。在`<ul>`标签中,创建多个列表项`<li>`,每个列表项表示导航栏的一个选项。每个列表项可以包含一个`<a>`标签,通过 href 属性设置跳转链接,并在标签内添加相应的文本内容。 接下来,使用CSS来设置导航栏的样式。通过选择器选择`#horizontal-nav`来设置导航栏的宽度、高度、背景颜色等样式。可以设置`display: flex`来使导航栏中的选项横向排列。通过选择器选择`#horizontal-nav li`来设置每个选项的样式,可以设置`list-style: none`来去除默认的列表样式,设置`padding`来调整选项之间的间距。 最后,使用JavaScript来实现导航栏横向滑动效果。首先,为导航栏容器`<ul>`添加一个事件监听器,例如使用`addEventListener("mousemove", scrollNav)`来监听鼠标移动事件。在事件处理函数`scrollNav`中,可以通过计算鼠标相对于导航栏容器的位置,来改变导航栏容器的滚动位置,从而实现滑动效果。可以使用`scrollLeft`属性来设置导航栏容器的滚动位置。 通过以上的步骤,就可以实现HTML5横向滑动导航栏。可以根据实际需求,进一步添加样式、动画效果、响应式设计等来完善导航栏的功能和外观。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值