效果图：不多说直接上代码，大家请看详细代码注释：
productxq.java:
package com.example.xh.twostylefragment; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; 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; <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">import android.widget.ImageView;</span> import android.widget.LinearLayout; import android.widget.PopupWindow; import android.widget.TextView; import android.widget.Toast; import android.widget.Button; import android.view.ViewGroup; /** * Created by XH on 2016/7/29. */ <p>public class productxq extends FragmentActivity{</p> private TextView[] RB; //定义一个数组RB来保存TextView,方便我们对TextView的修改和调用. private ViewPager viewpager;//定义一个viewpager,viewpager主要是用来保存不同的页面布局内容. private LinearLayout tab_container_layout;//定义一个linearlayout,我们后面要用它获得控件数量. private String[] titles={"商品","详情","评价"};//定义一个字符串类型的数组用来保存我们的标题内容. private Fragment[] fragments; <span style="font-size:10px;">//定义一个fragment数组方便我们访问不同的fragment.</span> @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.productxq);//显示productxq布局. init();//调用init（）函数. //设置ViewPager的适配器 viewpager.setAdapter(new MyAdpater(getSupportFragmentManager()));//为viewpager设置我们自定义的MyAdpater适配器. } /* init()函数 */ private void init() { viewpager =(ViewPager)findViewById(R.id.viewpager);//对viewpager进行注册 viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener(){//实现页面左右滑动切换时标题一起切换 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { selectedTitle(position);//<span style="font-size: 12.6316px; font-family: Arial, Helvetica, sans-serif;">重新设置标题的选中,根据position的值将页面和标题同步切换.</span> } @Override public void onPageScrollStateChanged(int state) { } }); fragments = new Fragment[3]; //new出一个容量为3的fragment数组 fragments[0] = new fragment1();//将各个fragment传给数组,记住创建fragment1的activity还有对应的fragment1.xml文件（这个布局是我们要显示的）, fragments[1] = new fragment2();//<span style="font-size: 12.6316px; font-family: Arial, Helvetica, sans-serif;">后面我会给出有关</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">fragment1的代码，大家可以看看,fragment2,3是一样的.</span> fragments[2] = new fragment3(); tab_container_layout =(LinearLayout)findViewById(R.id.tab_container_layout);//注册标题栏,见productxq.xml int count = tab_container_layout.getChildCount();//count用来保存标题栏的子控件数量 RB = new TextView[count]; //new出一个容量为count的TextView数组，方便我们访问标题栏. //从容器中的得到子控件 for (int i = 0; i < count;i++){ RB[i] = (TextView) tab_container_layout.getChildAt(i);//获取每个TextView标题栏. RB[i].setText(titles[i]);//给每个TextView标题栏赋值，也就是titles数组里面的字符串. RB[i].setTag(i);//给每个标题添加一个tag值 RB[i].setEnabled(true);//将每个标题栏设为可点击 //标题被单击，用户希望换一个标题 RB[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int item = (Integer) v.getTag(); //定义一个item保存tag值 viewpager.setCurrentItem(item); //viewpager根据item跳转到不同页面 selectedTitle(item);//重新设置标题的选中 } }); } //默认第一个标题不可被单击 RB[0].setEnabled(false); //默认第一个标题为选中项（红色表示选中） RB[0].setTextColor(Color.RED); } //重新设置标题的选中 private void selectedTitle(int index){ for (int i = 0;i < RB.length;i++){ RB[i].setTextColor(Color.BLACK);默认标题全为未选中（黑<span style="font-size: 12.6316px; font-family: Arial, Helvetica, sans-serif;">色表示未选中</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">）</span> RB[i].setEnabled(true);默认标题全部设为可单击 } RB[index].setTextColor(Color.RED);//设置当前标题为选中 RB[index].setEnabled(false);//设置当前标题为不可单击 } class MyAdpater extends FragmentPagerAdapter {//自定义的MyAdpater适配器 public MyAdpater(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { //根据position返回fragments数组里的fragment.（这里是指fragment1,,2,3） return fragments[position]; } @Override public int getCount() { return fragments.length; } } }productxq.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@color/gray" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageButton android:layout_width="wrap_content" android:layout_height="45dp" android:src="@drawable/fh" android:background="@null" android:onClick="fhsyj"/> <LinearLayout android:id="@+id/tab_container_layout" android:orientation="horizontal" android:layout_width="300dp" android:layout_height="wrap_content" android:layout_marginLeft="30dp"> <TextView android:id="@+id/b1" android:layout_width="wrap_content" android:layout_height="45dp" android:layout_weight="1" android:gravity="center" /> <TextView android:id="@+id/b2" android:layout_width="wrap_content" android:layout_height="45dp" android:layout_weight="1" android:gravity="center" /> <TextView android:id="@+id/b3" android:layout_width="wrap_content" android:layout_height="45dp" android:layout_weight="1" android:gravity="center" /> </LinearLayout> <Button android:id="@+id/btn" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginLeft="320dp" android:layout_marginTop="5dp" android:background="@drawable/menu"/> </FrameLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/huise"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="523dp"> </android.support.v4.view.ViewPager> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/huise"/> <TableLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="@color/bj" > <TableRow android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@color/bj"> <LinearLayout android:id="@+id/b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" > <ImageView android:id="@+id/lxmj" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:src="@drawable/lxmj" /> <TextView android:id="@+id/lxmj1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/lxmj" android:textColor="@color/black"/> </LinearLayout> <LinearLayout android:id="@+id/c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" > <ImageView android:id="@+id/dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dp" /> <TextView android:id="@+id/dp1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/dp" android:textColor="@color/black"/> </LinearLayout> <LinearLayout android:id="@+id/a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" > <ImageView android:id="@+id/gz" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/wgz" /> <TextView android:id="@+id/gz1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/gz" android:textColor="@color/black"/> </LinearLayout> <LinearLayout android:id="@+id/GWC" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:orientation="vertical" > <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/spss" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="@color/red" android:layout_marginLeft="30dp" /> <ImageView android:id="@+id/gwc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gwc" /> </FrameLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/gwc" android:textColor="@color/black" /> </LinearLayout> <Button android:id="@+id/jrgwc" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_weight="1" android:text="加入购物车" android:textSize="17dp" android:textColor="@color/bj" android:background="@drawable/addshoppingcar" android:onClick="jrgwc" /> </TableRow> </TableLayout> </LinearLayout>
fragment1.java:
package com.example.xh.twostylefragment; 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.ImageView; import android.widget.TextView; public class fragment1 extends Fragment { private View mMainView; @Override public void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); LayoutInflater inflater = getActivity().getLayoutInflater(); //将fragment1的内容放进viewpager里用mMainView保存
mMainView = inflater.inflate(R.layout.fragment1, (ViewGroup) getActivity().findViewById(R.id.viewpager), false);
} @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ViewGroup p = (ViewGroup) mMainView.getParent(); if (p != null) { p.removeAllViewsInLayout(); } return mMainView; //返回mMainView } }
fragment1.xml：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" > <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@color/bj"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/sp" android:layout_height="380dp" android:layout_width="365dp" android:src="@drawable/pd2" android:background="@null" android:contentDescription="@null" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/gray" /> <TextView android:id="@+id/js" android:layout_height="wrap_content" android:layout_width="match_parent" android:singleLine="false" android:text="@string/js" android:textSize="10dp" android:layout_marginTop="30dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/spprice" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@null" android:textSize="20dp" android:textStyle="bold" android:textColor="@color/red" android:layout_marginRight="210dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/jjtz" android:textSize="10dp" android:background="@color/bj" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/gray" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/yx" android:textSize="15dp" android:textColor="@color/black" android:background="@color/bj"/> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/gray" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/address" android:textSize="15dp" android:textColor="@color/black" android:background="@color/bj"/> </TableLayout> </ScrollView> </LinearLayout>
大家如果还有什么疑问或者注释有什么错误，欢迎大家评论里面讨论，每条评论都会回复！
