上图就是真小米商城的基本Ui以及整体框架页面
首先我们先看整体框架吧！
有底部菜单栏，说明每一个按钮将会对应一个页面，这个我们就用最简单的方式ViewPager（嵌套Fragment）+RadioGroup（嵌套RadioButton）实现吧！而且整体页面是不可滑动的，只能点击底部菜单栏来实现页面切换，下面我们来看看如何实现它吧！
首先看眼布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.crj.milletmall.view.NoScrollViewPage
android:id="@+id/middle_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/radio_rg">
</com.crj.milletmall.view.NoScrollViewPage>
<RadioGroup
android:id="@+id/radio_rg"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="@+id/home_rb"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:gravity="center"
android:drawableTop="@drawable/home_bot_bar"
android:text="@string/frag_main"
android:textColor="@drawable/bot_textcolor" />
<RadioButton
android:id="@+id/category_rb"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:drawableTop="@drawable/category_bot_bar"
android:text="@string/frag_category"
android:textColor="@drawable/bot_textcolor" />
<RadioButton
android:id="@+id/discover_rb"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:drawableTop="@drawable/discover_bot_bar"
android:text="@string/frag_discover"
android:textColor="@drawable/bot_textcolor" />
<RadioButton
android:id="@+id/shopcar_rb"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:layout_marginTop="-10dp"
android:gravity="center"
android:background="@drawable/shopcar_bot_bar"
/>
<RadioButton
android:id="@+id/mine_rb"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:drawableTop="@drawable/mine_bot_bar"
android:text="@string/frag_mine"
android:textColor="@drawable/bot_textcolor" />
</RadioGroup>
</RelativeLayout>以上ViewPager使用的是一个自定义的不可滑动的ViewPager，我们看看怎么怎么自定义的
public class NoScrollViewPage extends ViewPager {
private boolean isPagingEnabled = false;
public NoScrollViewPage(Context context) {
super(context);
}
public NoScrollViewPage(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.isPagingEnabled && super.onTouchEvent(event);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return this.isPagingEnabled && super.onInterceptTouchEvent(event);
}实现以上代码，就可实现不可滑动。下面我们就来看看实现代码吧！
public class HomeActivity extends AppCompatActivity {
private NoScrollViewPage middleVp;
private RadioButton homeRb;
private RadioButton categoryRb;
private RadioButton discoverRb;
private RadioButton shopcarRb;
private RadioButton mineRb;
private RadioGroup radioRg;
private List<Fragment> fragments = new ArrayList<>();
private FragmentAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);
initView();
downData();
}
private void downData() {
//向数据源内添加数据
fragments.add(new HomeFragment());
fragments.add(new CategoryFragment());
fragments.add(new DiscoverFragment());
fragments.add(new ShopcarFragment());
fragments.add(new MineFragment());
//ViewPager适配器
adapter = new FragmentAdapter(getSupportFragmentManager(), fragments);
middleVp.setAdapter(adapter);
//viewPager的点击事件
middleVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
RadioButton childAt = (RadioButton) radioRg.getChildAt(position);
childAt.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//RadioGroup的点击事件
radioRg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i){
case R.id.home_rb:
middleVp.setCurrentItem(0);
break;
case R.id.category_rb:
middleVp.setCurrentItem(1);
break;
case R.id.discover_rb:
middleVp.setCurrentItem(2);
break;
case R.id.shopcar_rb:
middleVp.setCurrentItem(3);
break;
case R.id.mine_rb:
middleVp.setCurrentItem(4);
break;
}
}
});
}
//初始化控件
private void initView() {
middleVp = (NoScrollViewPage) findViewById(R.id.middle_vp);
homeRb = (RadioButton) findViewById(R.id.home_rb);
categoryRb = (RadioButton) findViewById(R.id.category_rb);
discoverRb = (RadioButton) findViewById(R.id.discover_rb);
shopcarRb = (RadioButton) findViewById(R.id.shopcar_rb);
mineRb = (RadioButton) findViewById(R.id.mine_rb);
radioRg = (RadioGroup) findViewById(R.id.radio_rg);
}
}这样就实现了点击页面跳转，接下来我看看看首页内部结构吧：
我使用的是disgin包下的TabLayout
布局：
<RelativeLayout 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"
tools:context=".fragment.HomeFragment">
<com.crj.milletmall.view.HeadView
android:layout_width="match_parent"
android:id="@+id/head_view"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="@+id/tab_tl"
android:layout_below="@id/head_view"
android:layout_height="50dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:id="@+id/viewPager"
android:layout_below="@id/tab_tl"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>headView是一个自定义的一个类，里面只是
布局：
<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="40dp"
android:background="#FAFAFA"
android:focusable="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/message_iv"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="@drawable/message"
tools:ignore="ContentDescription" />
<SearchView
android:id="@+id/search"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
<!--<EditText-->
<!--android:id="@+id/search_et"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="28dp"-->
<!--android:layout_marginRight="5dp"-->
<!--android:layout_weight="1"-->
<!--android:background="@drawable/search_et_shap"-->
<!--android:drawableLeft="@drawable/icon_search"-->
<!--android:paddingLeft="5dp" />-->
<ImageView
android:id="@+id/scan_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:src="@drawable/scan"
tools:ignore="ContentDescription,RtlHardcoded" />
</LinearLayout>代码：
public class HeadView extends LinearLayout implements View.OnClickListener {
public SearchView searchView;
private OnScanAndVoiceListener listener;
public ImageView scanImg;
public HeadView(Context context) {
this(context, null);
}
public HeadView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public HeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
LayoutInflater.from(context).inflate(R.layout.head_layout, this);
searchView = (SearchView) findViewById(R.id.search);
scanImg = (ImageView) findViewById(R.id.scan_iv);
ImageView message = (ImageView) findViewById(R.id.message_iv);
scanImg.setOnClickListener(this);
message.setOnClickListener(this);
}
public void setOnQueryTextListener(SearchView.OnQueryTextListener listener) {
searchView.setOnQueryTextListener(listener);
}
public void setOnScanAndSpeakListener(OnScanAndVoiceListener listener) {
this.listener = listener;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.scan_iv:
listener.startScanner();
break;
case R.id.message_iv:
listener.startSpeak();
break;
}
}
}创建一个接口
public interface OnScanAndVoiceListener {
/**
* 扫描回调
*/
void startScanner();
/**
* 语音回调
*/
void startSpeak();
}
顶部搜索框扫一扫，消息，就是这样，我们继续看看推荐页代码：
public class HomeFragment extends Fragment implements OnScanAndVoiceListener {
private View view;
private TabLayout tab_tl;
private ViewPager viewPager;
private String path = "http://169.254.164.79:8080/word/xiaomijson.json";
private List<Fragment> middleList = new ArrayList<>();
private String[] titles = {"推荐", "手机", "智能", "电视5周年", "笔记本", "家电", "新款游戏本", "大内存手机", "全面屏", "生活周边", "盒子"};
//当标签数目小于等于4个时，标签栏不可滑动
public static final int MOVABLE_COUNT = 4;
private HeadView head_view;
public HomeFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_home, container, false);
initView(view);
FragmentData(view);
return view;
}
private void FragmentData(View view) {
//每次进入前数据源一定要清空，不然一定会造成下标越界的后果
middleList.clear();
middleList.add(new RecommendFragment());
middleList.add(new PhoneFragment());
middleList.add(new CapacityFragment());
middleList.add(new AnniversaryFragment());
middleList.add(new JotterFragment());
middleList.add(new ApplianceFragment());
middleList.add(new NewstyleFragment());
middleList.add(new MemoryFragment());
middleList.add(new OverallFragment());
middleList.add(new RimFragment());
middleList.add(new BoxFragment());
Log.e("FragmentData", titles.length + "");
/**
* 首先这个是Fragment嵌套Fragment，如果使用getSupportFragmentmanager
* 会导致数据加载不出来只能切换界面再切换回来，数据才会展示，如此我们就是用
* getChildFragmentManager
* 这就相当一个子管理者，专门处理Fragment嵌套Fragment出现的问题
*/
MiddleAdapter adapter = new MiddleAdapter(this.getChildFragmentManager(), middleList, titles);
viewPager.setAdapter(adapter);
int length = titles.length;
//MODE_FIXED标签栏不可滑动，各个标签会平分屏幕的宽度
tab_tl.setTabMode(length <= MOVABLE_COUNT ? TabLayout.MODE_FIXED : TabLayout.MODE_SCROLLABLE);
//指示条的颜色
tab_tl.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.holo_orange_dark));
// tab_tl.setSelectedTabIndicatorHeight((int) getResources().getDimension(R.dimen.indicatorHeight));
//关联tabLayout和ViewPager,两者的选择和滑动状态会相互影响
tab_tl.setupWithViewPager(viewPager);
}
private void initView(View view) {
tab_tl = (TabLayout) view.findViewById(R.id.tab_tl);
viewPager = (ViewPager) view.findViewById(R.id.viewPager);
head_view = (HeadView) view.findViewById(R.id.head_view);
}
@Override
public void startScanner() {
}
@Override
public void startSpeak() {
}
}
这就实现内部可滑动的标签，以及它的对应页面，现在我们就往内部填放数据吧：
public class RecommendFragment extends Fragment implements OnScanAndVoiceListener {
private Banner banner_a;
private ImageView fake_iv;
private ImageView image_iv;
private RecyclerView recycler;
private String path = "http://192.168.0.108:8080/word/home_mi.json";
private List<HomeBean.DataEntity.HorizontalListEntity> HorizontalList = new ArrayList<>();
private List<HomeBean.DataEntity.ListEntity> listEntities = new ArrayList<>();
private List<String> bannerList = new ArrayList<>();
private RecyclerAdapter adapter;
private long aLong = 1000;
private MyDiskLruCache myDiskLruCache;
private TextView hour_tv;
private TextView minute_tv;
private TextView second_tv;
private Timer timer;
@SuppressLint("HandlerLeak")
Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 1) {
List<String> banners = (List<String>) msg.obj;
bannerList.addAll(banners);
banner_a.setBannerStyle(BannerConfig.CIRCLE_INDICATOR).setImages(bannerList).setImageLoader(new ImageLoader() {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(getActivity()).load(path).into(imageView);
}
}).setDelayTime(3000).setIndicatorGravity(BannerConfig.RIGHT).start();
} else if (msg.what == 2) {
long miao = (long) msg.obj;
time2Data(miao);
}
}
};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_recommend, container, false);
myDiskLruCache = new MyDiskLruCache(getContext());
initView(view);
getHttp(path);
// bannerData(view);
ArrayData();
timeData();
return view;
}
private void timeData() {
new Thread(new Runnable() {
@Override
public void run() {
for (long i = aLong; i >= 0; i--) {
Message message = handler.obtainMessage();
message.what = 2;
message.obj = i;
handler.sendMessage(message);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
private void time2Data(long miao) {
if (miao > 0) {
String formatLongToTimeStr = formatLongToTimeStr(miao);
String[] split = formatLongToTimeStr.split("：");
for (int i = 0; i < split.length; i++) {
if (i == 0) {
if (Integer.valueOf(split[0]) < 10) {
hour_tv.setText("0" + split[0] + "");
} else {
hour_tv.setText(split[0] + "");
}
}
if (i == 1) {
if (Integer.valueOf(split[1]) < 10) {
minute_tv.setText("0" + split[1] + "");
} else {
minute_tv.setText(split[1] + "");
}
}
if (i == 2) {
if (Integer.valueOf(split[2]) < 10) {
second_tv.setText("0" + split[2] + "");
} else {
second_tv.setText(split[2] + "");
}
}
}
}
}
private String formatLongToTimeStr(Long l) {
int hour = 0;
int minute = 0;
int second = 0;
String strtime = null;
second = l.intValue();
if (second > 60) {
minute = second / 60; //取整
second = second % 60; //取余
}
if (minute > 60) {
hour = minute / 60;
minute = minute % 60;
}
strtime = hour + "：" + minute + "：" + second;
return strtime;
}
private void ArrayData() {
Log.i("TAG", "iflashbuys======" + HorizontalList.size());
adapter = new RecyclerAdapter(getContext(), HorizontalList);
recycler.setAdapter(adapter);
}
private void bannerData(View view) {
//设置banner样式
banner_a.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
//设置图片加载器
banner_a.setImageLoader(new ImageLoader() {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
});
//设置图片集合
Log.i("TAG", "setImages======" + bannerList.size());
banner_a.setImages(bannerList);
//设置自动轮播，默认为true
banner_a.isAutoPlay(true);
//设置轮播时间
banner_a.setDelayTime(3000);
//设置指示器位置
banner_a.setIndicatorGravity(BannerConfig.RIGHT);
}
private void getHttp(String url) {
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder().get().url(path).build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
MemoryCache memoryCache = new MemoryCache();
String cacheData = memoryCache.getCacheData(path);
Log.i("getCacheData",cacheData+"");
if (cacheData != null) {
Log.i("TAG","数据是从内存获取到的");
//从内存获取数据
initData(cacheData);
} else {
//从硬盘获取数据
Log.i("TAG","数据是从硬盘获取到的");
try {
InputStream data = myDiskLruCache.getCacheData(path);
String result = new String(ByteStreams.toByteArray(data));
initData(result);
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
@Override
public void onResponse(Call call, Response response) throws IOException {
//存入数据
MyDiskLruCache myDiskLruCache = new MyDiskLruCache(getContext());
myDiskLruCache.saveCacheData(path);
String string = response.body().string();
MemoryCache memoryCache = new MemoryCache();
memoryCache.saveCacheData(path, string);
//Okhttp框架解析
initData(string);
}
});
}
private void initData(String string) {
Message message = new Message();
List<String> banners = new ArrayList<>();
try {
JSONObject jsonObject = new JSONObject(string);
int code = jsonObject.optInt("code");
JSONObject jsonData = jsonObject.optJSONObject("data");
//获取Banner填充数据
JSONArray jsonBanners = jsonData.optJSONArray("banner");
for (int i = 0; i < jsonBanners.length(); i++) {
String imgUrl = jsonBanners.optString(i);
banners.add(imgUrl);
}
message.what = 1;
message.obj = banners;
handler.sendMessage(message);
//获取横向列表滑动数据
JSONArray jsonHorObj = jsonData.optJSONArray("horizontal_list");
for (int i = 0; i < jsonHorObj.length(); i++) {
JSONObject jObj = jsonHorObj.optJSONObject(i);
HomeBean.DataEntity.HorizontalListEntity entity = new HomeBean.DataEntity.HorizontalListEntity();
// TODO 加入参数
entity.setImg_url(jObj.optString("img_url"));
entity.setProduct_name(jObj.optString("product_name"));
entity.setProduct_org_price(jObj.optString("product_org_price"));
entity.setProduct_price(jObj.optString("product_price"));
//为数据源赋值
HorizontalList.add(entity);
}
JSONArray jsonListObj = jsonData.optJSONArray("list");
for (int i = 0; i < jsonListObj.length(); i++) {
JSONObject listObj = jsonListObj.optJSONObject(i);
HomeBean.DataEntity.ListEntity listEntity = new HomeBean.DataEntity.ListEntity();
listEntity.setImg_url(listObj.optString("img_url"));
listEntity.setProduct_name(listObj.optString("product_name"));
listEntity.setProduct_price(listObj.optString("product_price"));
listEntity.setProduct_org_price(listObj.optString("product_org_price"));
}
} catch (JSONException e) {
e.printStackTrace();
}
}
private void initView(View view) {
banner_a = (Banner) view.findViewById(R.id.banner_a);
fake_iv = (ImageView) view.findViewById(R.id.fake_iv);
image_iv = (ImageView) view.findViewById(R.id.image_iv);
recycler = (RecyclerView) view.findViewById(R.id.recycler);
LinearLayoutManager manager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
recycler.setLayoutManager(manager);
hour_tv = (TextView) view.findViewById(R.id.hour_tv);
minute_tv = (TextView) view.findViewById(R.id.minute_tv);
second_tv = (TextView) view.findViewById(R.id.second_tv);
}
@Override
public void onStart() {
super.onStart();
//开始轮播
banner_a.start();
}
@Override
public void onStop() {
super.onStop();
//接收轮播
banner_a.stopAutoPlay();
}
@Override
public void startScanner() {
}
@Override
public void startSpeak() {
}
}接下来，我们看看分类页面的布局以及代码实现：
布局
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.CategoryFragment">
<q.rorbin.verticaltablayout.VerticalTabLayout
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/tablayout"
android:scrollIndicators="bottom"
android:fitsSystemWindows="true"
app:indicator_corners="5dp"
app:indicator_width="2dp"
android:background="@android:color/white"
app:indicator_color="#a41d1d"
app:indicator_gravity="left"
app:tab_height="50dp"
app:tab_mode="scrollable"
android:layout_height="match_parent"/>
<com.crj.milletmall.view.VerticalPager
android:layout_width="0dp"
android:layout_weight="4"
android:id="@+id/viewpager"
android:layout_height="match_parent">
</com.crj.milletmall.view.VerticalPager>
</LinearLayout>是不是觉得很眼熟，一个Tablayout，一个ViewPager，只不过都是自定义的，VerticalTagLayout是第三方写好的一个控件，添加依赖：
implementation 'q.rorbin:VerticalTabLayout:1.2.5'即可，
VerticalPager则需要自己定义，代码如下：
public class VerticalPager extends ViewPager {
private OnItemClickListener mOnItemClickListener;
public VerticalPager(Context context) {
super(context);
init();
}
public VerticalPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
setup();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
private float scaleY;
@Override
public boolean onTouchEvent(MotionEvent ev) {
System.out.println("----------getY" + ev.getY());
System.out.println("----------scaleY" + scaleY);
if (ev.getAction() == MotionEvent.ACTION_MOVE) {
}
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
scaleY = ev.getY();
}
if (ev.getAction() == MotionEvent.ACTION_UP) {
if (scaleY == ev.getY()) {
System.out.println("------------------======");
scaleY = 0;
return false;
}
}
try {
return super.onTouchEvent(swapXY(ev));
} catch (Exception e) {
}
return true;
}
// 点击事件
public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
mOnItemClickListener = onItemClickListener;
}
public interface OnItemClickListener {
void onItemClick(int position);
}
private void setup() {
final GestureDetector tapGestureDetector = new GestureDetector(getContext(), new TapGestureListener());
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
tapGestureDetector.onTouchEvent(event);
return false;
}
});
}
private class TapGestureListener extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onSingleTapConfirmed(MotionEvent e) {
if (mOnItemClickListener != null) {
mOnItemClickListener.onItemClick(getCurrentItem());
}
return true;
}
}好了，这样UI就搭建完成，看看实现代码：
public class CategoryFragment extends Fragment {
private View view;
private List<String> datas=new ArrayList<>();
private VerticalTabLayout tablayout;
private VerticalPager viewpager;
private VpAdapter adapter;
public CategoryFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_category, container, false);
initView(view);
loadData();
return view;
}
private void loadData() {
datas.clear();
datas.add("新品");
datas.add("手机");
datas.add("电视");
datas.add("电脑");
datas.add("家电");
datas.add("路由");
datas.add("出行");
datas.add("穿戴");
datas.add("智能");
datas.add("电源");
datas.add("个护");
datas.add("灯具");
datas.add("儿童");
datas.add("插线板");
datas.add("音频");
datas.add("箱包");
datas.add("生活");
datas.add("配件");
datas.add("家装");
datas.add("礼品");
datas.add("服务");
datas.add("米粉卡");
datas.add("零售店");
//适配器
adapter = new VpAdapter(getChildFragmentManager());
viewpager.setAdapter(adapter);
//进行关联
tablayout.setupWithViewPager(viewpager);
}
private void initView(View view) {
tablayout = (VerticalTabLayout) view.findViewById(R.id.tablayout);
viewpager = (VerticalPager) view.findViewById(R.id.viewpager);
}
// 自定义适配器
class VpAdapter extends FragmentPagerAdapter {
public VpAdapter(FragmentManager fm) {
super(fm);
}
//返回选项卡的文本 ，，，添加选项卡
@Override
public CharSequence getPageTitle(int position) {
return datas.get(position);
}
//动态创建fragment对象并返回
@Override
public Fragment getItem(int position) {
// 创建布局
ProductFragment vcount = new ProductFragment();
// Bundle bundle = new Bundle();
放入值
// bundle.putString("name", datas.get(position));
放入布局文件中
// vcount.setArguments(bundle);
return vcount;
}
//返回数量
@Override
public int getCount() {
return datas.size();
}
这样就实现了分类页竖向滑动标签，竖向滑动的ViewPager。
接下来就是我们的发现页了，最上方是一个滚动轮播图，下方是一个网格式列表：
布局：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.DiscoverFragment">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="@+id/myRecycler"
android:layout_height="match_parent"/>
</LinearLayout>代码：
public class DiscoverFragment extends Fragment {
private View inflate;
private Banner discover_bn;
private RecyclerView myRecycler;
private List<DiscoverBean.ResultEntity.ListEntity> cars = new ArrayList<>();
private ScrollView scrollView;
private String path = "";
private View header;
public DiscoverFragment() {
// Required empty public constructor
}
@SuppressLint("ClickableViewAccessibility")
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
inflate = inflater.inflate(R.layout.fragment_discover, container, false);
initView(inflate);
BannerData();
ListData();
return inflate;
}
private void ListData() {
cars.clear();
OkHttpClient okHttpClient = new OkHttpClient();
Request request = new Request.Builder().get().url(path).build();
okHttpClient.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
}
@Override
public void onResponse(Call call, Response response) throws IOException {
String string = response.body().string();
Gson gson = new Gson();
DiscoverBean bean = gson.fromJson(string, DiscoverBean.class);
cars.addAll(bean.getResult().getList());
Log.i("DiscoverFragment",cars.get(0).toString());
getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
Log.i("DiscoverFragment",cars.get(0).getTitle());
DiscoverAdapter adapter = new DiscoverAdapter(getContext(),cars);
myRecycler.setAdapter(adapter);
adapter.addHeaderView(header);
}
});
}
});
}
private void BannerData() {
//设置Banner显示样式
discover_bn.setBannerStyle(BannerConfig.NUM_INDICATOR);
//设置Banner图片集合
discover_bn.setImages(ImageData());
//设置图片加载器
discover_bn.setImageLoader(new ImageLoader() {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
});
//设置自动轮播
discover_bn.isAutoPlay(true);
//设置轮播时间
discover_bn.setDelayTime(3000);
//设置指示器位置
discover_bn.setIndicatorGravity(BannerConfig.RIGHT);
}
private List<String> ImageData() {
List<String> imageList = new ArrayList<>();
imageList.add("https://club2.autoimg.cn/album/g28/M02/19/62/userphotos/2018/09/11/10/ChcCR1uXI56AJYLTAASQBra5Ma0257.jpg");
imageList.add("https://club2.autoimg.cn/album/g26/M04/D3/E4/userphotos/2018/08/28/09/ChsEe1uEptGAeR_VAAXAbdRZlxg254.jpg");
imageList.add("https://club2.autoimg.cn/album/g1/M0A/B7/DC/userphotos/2018/09/03/10/ChsEj1uMonaAfLKhAAWHLF4Kw7c659.jpg");
imageList.add("https://club2.autoimg.cn/album/g1/M0A/82/06/userphotos/2018/08/22/16/ChcCQ1t9I0uAVm8lAARLaOznUFA233.jpg");
imageList.add("https://club2.autoimg.cn/album/g28/M03/E1/07/userphotos/2018/08/29/19/ChsEfVuGgrSATWzhAAFDTgN9xZ8696.jpg");
return imageList;
}
private void initView(View inflate) {
myRecycler = (RecyclerView) inflate.findViewById(R.id.myRecycler);
// myRecycler.setHasFixedSize(true);
// myRecycler.setNestedScrollingEnabled(false);
GridLayoutManager manager = new GridLayoutManager(getContext(), 3);
//设置不同大小的网格列表
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return (3 - position % 3);
}
});
myRecycler.setLayoutManager(manager);
header = LayoutInflater.from(getContext()).inflate(R.layout.header_layout, null);
discover_bn = (Banner) header.findViewById(R.id.discover_bn);
}
@Override
public void onStart() {
super.onStart();
//开始轮播
discover_bn.start();
}
@Override
public void onStop() {
super.onStop();
//接收轮播
discover_bn.stopAutoPlay();
}
下面我们看一看购物车的实现吧！
布局
<RelativeLayout 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"
tools:context=".fragment.ShopcarFragment">
<include android:id="@+id/shopping_title" layout="@layout/title_layout"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray" />
<ListView
android:id="@+id/shopping_list"
android:layout_below="@id/shopping_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none"
android:layout_above="@id/rl_bottom"
tools:ignore="ObsoleteLayoutParam" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray" />
<LinearLayout
android:id="@+id/rl_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@color/white">
<CheckBox
android:id="@+id/ck_all"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:button="@drawable/check_box_style"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:gravity="center"
android:paddingLeft="10dp"
android:scaleX="0.6"
android:scaleY="0.6"
android:text="全选"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@android:color/black"
tools:ignore="HardcodedText,ObsoleteLayoutParam,RtlHardcoded,RtlSymmetry" />
<TextView
android:id="@+id/tv_show_price"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:text="合计:0.00"
android:textColor="@android:color/black"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/tv_settlement"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="结算(0)"
android:textColor="@android:color/black"
tools:ignore="HardcodedText,ObsoleteLayoutParam,RtlHardcoded" />
</LinearLayout>
title_layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#FAFAFA"
android:layout_height="50dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="购物车"
android:textColor="@android:color/black"
android:textSize="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="@+id/message_title"
android:text="编辑"
android:id="@+id/bt_header_right"
android:textSize="20sp"
tools:ignore="RtlCompat" />
<ImageView
android:id="@+id/message_title"
android:layout_width="wrap_content"
android:padding="5dp"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:src="@drawable/message"
tools:ignore="RtlCompat" />
实现代码：
public class ShopcarFragment extends Fragment implements CheckInterface,ModifyCountInterface,View.OnClickListener{
private View inflate;
private TextView tv_title;
private TextView bt_header_right;
private ImageView message_title;
private ListView shoppingLv;
private CheckBox ck_all;
private TextView tv_show_price;
private TextView tv_settlement;
private LinearLayout rl_bottom;
private List<ShoppingCartBean> shoppingList=new ArrayList<>();
private ShoppingCartAdapter adapter;
private int totalCount=0;
private double totalPrice=0.00;
private boolean flag=false;
public ShopcarFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
inflate = inflater.inflate(R.layout.fragment_shopcar, container, false);
initView(inflate);
ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.init(ImageLoaderConfiguration.createDefault(getContext()));
initData();
return inflate;
}
private void initView(View inflate) {
bt_header_right = (TextView) inflate.findViewById(R.id.bt_header_right);
shoppingLv = (ListView) inflate.findViewById(R.id.shopping_list);
ck_all = (CheckBox) inflate.findViewById(R.id.ck_all);
tv_show_price = (TextView) inflate.findViewById(R.id.tv_show_price);
tv_settlement = (TextView) inflate.findViewById(R.id.tv_settlement);
rl_bottom = (LinearLayout) inflate.findViewById(R.id.rl_bottom);
bt_header_right.setOnClickListener(this);
ck_all.setOnClickListener(this);
tv_settlement.setOnClickListener(this);
}
private void initData() {
for (int i = 0; i < 3; i++) {
ShoppingCartBean shoppingCartBean = new ShoppingCartBean();
shoppingCartBean.setShoppingName("小米8 6GB+64GB\n" +
"全球首款双频GPS，骁龙845处理器");
shoppingCartBean.setDressSize(10);
shoppingCartBean.setId(i);
shoppingCartBean.setPrice(2599);
shoppingCartBean.setCount(1);
shoppingCartBean.setImageUrl("https://i1.mifile.cn/a1/pms_1528092587.49664451!220x220.jpg");
shoppingList.add(shoppingCartBean);
}
for (int i = 0; i < 4; i++) {
ShoppingCartBean shoppingCartBean = new ShoppingCartBean();
shoppingCartBean.setShoppingName("小米MIX 2S\n陶瓷机身 手机中的艺术品");
shoppingCartBean.setAttribute("黑白色");
shoppingCartBean.setPrice(3599);
shoppingCartBean.setId(i+2);
shoppingCartBean.setCount(3);
shoppingCartBean.setImageUrl("https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg");
shoppingList.add(shoppingCartBean);
}
adapter = new ShoppingCartAdapter(getContext(),shoppingList);
adapter.setCheckInterface(this);
adapter.setModifyCountInterface(this);
shoppingLv.setAdapter(adapter);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
//全选按钮
case R.id.ck_all:
if (shoppingList.size() != 0) {
if (ck_all.isChecked()) {
for (int i = 0; i < shoppingList.size(); i++) {
shoppingList.get(i).setChoosed(true);
}
adapter.notifyDataSetChanged();
} else {
for (int i = 0; i < shoppingList.size(); i++) {
shoppingList.get(i).setChoosed(false);
}
adapter.notifyDataSetChanged();
}
}
statistics();
break;
case R.id.bt_header_right:
flag = !flag;
if (flag) {
bt_header_right.setText("完成");
adapter.isShow(false);
} else {
bt_header_right.setText("编辑");
adapter.isShow(true);
}
break;
case R.id.tv_settlement: //结算
lementOnder();
break;
}
}
/**
* 结算订单、支付
*/
private void lementOnder() {
//选中的需要提交的商品清单
for (ShoppingCartBean bean:shoppingList ){
boolean choosed = bean.isChoosed();
if (choosed){
String shoppingName = bean.getShoppingName();
int count = bean.getCount();
double price = bean.getPrice();
int size = bean.getDressSize();
String attribute = bean.getAttribute();
int id = bean.getId();
Log.d("ShoppingCartBean",id+"----id---"+shoppingName+"---"+count+"---"+price+"--size----"+size+"--attr---"+attribute);
}
}
ToastUtil.showL(getContext(),"总价："+totalPrice);
//跳转到支付界面
}
/**
* 单选
* @param position 组元素位置
* @param isChecked 组元素选中与否
*/
@Override
public void checkGroup(int position, boolean isChecked) {
shoppingList.get(position).setChoosed(isChecked);
if (isAllCheck())
ck_all.setChecked(true);
else
ck_all.setChecked(false);
adapter.notifyDataSetChanged();
statistics();
}
/**
* 遍历list集合
* @return
*/
private boolean isAllCheck() {
for (ShoppingCartBean group : shoppingList) {
if (!group.isChoosed())
return false;
}
return true;
}
/**
* 统计操作
* 1.先清空全局计数器<br>
* 2.遍历所有子元素，只要是被选中状态的，就进行相关的计算操作
* 3.给底部的textView进行数据填充
*/
public void statistics() {
totalCount = 0;
totalPrice = 0.00;
for (int i = 0; i < shoppingList.size(); i++) {
ShoppingCartBean shoppingCartBean = shoppingList.get(i);
if (shoppingCartBean.isChoosed()) {
totalCount++;
totalPrice += shoppingCartBean.getPrice() * shoppingCartBean.getCount();
}
}
tv_show_price.setText("合计:" + totalPrice);
tv_settlement.setText("结算(" + totalCount + ")");
}
/**
* 增加
* @param position 组元素位置
* @param showCountView 用于展示变化后数量的View
* @param isChecked 子元素选中与否
*/
@Override
public void doIncrease(int position, View showCountView, boolean isChecked) {
ShoppingCartBean shoppingCartBean = shoppingList.get(position);
int currentCount = shoppingCartBean.getCount();
currentCount++;
shoppingCartBean.setCount(currentCount);
((TextView) showCountView).setText(currentCount + "");
adapter.notifyDataSetChanged();
statistics();
}
/**
* 删减
*
* @param position 组元素位置
* @param showCountView 用于展示变化后数量的View
* @param isChecked 子元素选中与否
*/
@Override
public void doDecrease(int position, View showCountView, boolean isChecked) {
ShoppingCartBean shoppingCartBean = shoppingList.get(position);
int currentCount = shoppingCartBean.getCount();
if (currentCount == 1) {
return;
}
currentCount--;
shoppingCartBean.setCount(currentCount);
((TextView) showCountView).setText(currentCount + "");
adapter.notifyDataSetChanged();
statistics();
}
/**
* 删除
*
* @param position
*/
@Override
public void childDelete(int position) {
shoppingList.remove(position);
adapter.notifyDataSetChanged();
statistics();
}
}
Adapter
public class ShoppingCartAdapter extends BaseAdapter {
private boolean isShow = true;//是否编辑完成
private Context context;
private List<ShoppingCartBean> shoppingList;
//复选框接口
private CheckInterface checkInterface;
//改变商品数量接口
private ModifyCountInterface modifyCountInterface;
public ShoppingCartAdapter(Context context, List<ShoppingCartBean> shoppingList) {
this.context = context;
this.shoppingList = shoppingList;
}
/**
* 单选接口
*
* @param checkInterface
*/
public void setCheckInterface(CheckInterface checkInterface) {
this.checkInterface = checkInterface;
}
/**
* 改变商品数量接口
*
* @param modifyCountInterface
*/
public void setModifyCountInterface(ModifyCountInterface modifyCountInterface) {
this.modifyCountInterface = modifyCountInterface;
}
@Override
public int getCount() {
return shoppingList == null ? 0 : shoppingList.size();
}
@Override
public Object getItem(int i) {
return shoppingList.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
/**
* 是否显示可编辑
*
* @param flag
*/
public void isShow(boolean flag) {
isShow = flag;
notifyDataSetChanged();
}
@SuppressLint("SetTextI18n")
@Override
public View getView(final int i, View view, ViewGroup viewGroup) {
final ViewHolder holder;
if (view == null) {
view = LayoutInflater.from(context).inflate(R.layout.item_shopping_cart_layout, viewGroup, false);
holder = new ViewHolder(view);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
final ShoppingCartBean bean = shoppingList.get(i);
boolean choosed = bean.isChoosed();
if (choosed) {
holder.ckOneChose.setChecked(true);
} else {
holder.ckOneChose.setChecked(false);
}
String attribute = bean.getAttribute();
if (!StringUtil.isEmpty(attribute)) {
holder.tvCommodityAttr.setText(attribute);
} else {
holder.tvCommodityAttr.setText(bean.getDressSize() + "");
}
holder.tvCommodityAttr.setText(bean.getShoppingName());
holder.tvCommodityPrice.setText(bean.getPrice() + "");
holder.tvCommodityNum.setText(" X" + bean.getCount() + "");
holder.tvCommodityShowNum.setText(bean.getCount() + "");
ImageLoader.getInstance().displayImage(bean.getImageUrl(), holder.ivShowPic);
//单选按钮
holder.ckOneChose.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bean.setChoosed(((CheckBox) view).isChecked());
//向外暴露的接口
checkInterface.checkGroup(i, ((CheckBox) view).isChecked());
}
});
//增加按钮
holder.ivAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//暴露增加接口
modifyCountInterface.doIncrease(i, holder.tvCommodityShowNum, holder.ckOneChose.isChecked());
}
});
//删除按钮
holder.ivSub.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//暴露删减接口
modifyCountInterface.doDecrease(i,holder.tvCommodityShowNum,holder.ckOneChose.isChecked());
}
});
//删除弹框
holder.tvCommodityDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
AlertDialog alert = new AlertDialog.Builder(context).create();
alert.setTitle("操作提示");
alert.setMessage("您确定要将这些商品从购物车中移除吗？");
alert.setButton(DialogInterface.BUTTON_NEGATIVE, "取消",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
return;
}
});
alert.setButton(DialogInterface.BUTTON_POSITIVE, "确定",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//删除 目前只是从item中移除
modifyCountInterface.childDelete(i);
}
});
alert.show();
}
});
//判断是否在编辑状态下
if (isShow) {
holder.tvCommodityName.setVisibility(View.VISIBLE);
holder.rlEdit.setVisibility(View.GONE);
holder.tvCommodityNum.setVisibility(View.VISIBLE);
holder.tvCommodityDelete.setVisibility(View.GONE);
} else {
holder.tvCommodityName.setVisibility(View.VISIBLE);
holder.rlEdit.setVisibility(View.VISIBLE);
holder.tvCommodityNum.setVisibility(View.GONE);
holder.tvCommodityDelete.setVisibility(View.VISIBLE);
}
return view;
}
class ViewHolder {
ImageView ivShowPic, tvCommodityDelete;
TextView tvCommodityName, tvCommodityAttr, tvCommodityPrice, tvCommodityNum, tvCommodityShowNum, ivSub, ivAdd;
CheckBox ckOneChose;
LinearLayout rlEdit;
public ViewHolder(View itemView) {
ckOneChose = (CheckBox) itemView.findViewById(R.id.ck_chose);
ivShowPic = (ImageView) itemView.findViewById(R.id.iv_show_pic);
ivSub = (TextView) itemView.findViewById(R.id.iv_sub);
ivAdd = (TextView) itemView.findViewById(R.id.iv_add);
tvCommodityName = (TextView) itemView.findViewById(R.id.tv_commodity_name);
tvCommodityAttr = (TextView) itemView.findViewById(R.id.tv_commodity_attr);
tvCommodityPrice = (TextView) itemView.findViewById(R.id.tv_commodity_price);
tvCommodityNum = (TextView) itemView.findViewById(R.id.tv_commodity_num);
tvCommodityShowNum = (TextView) itemView.findViewById(R.id.tv_commodity_show_num);
tvCommodityDelete = (ImageView) itemView.findViewById(R.id.tv_commodity_delete);
rlEdit = (LinearLayout) itemView.findViewById(R.id.rl_edit);
}
}
}下面我们来实现一下我的，也就是个人中心页面，
布局：
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:leon="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:orientation="vertical"
tools:context=".fragment.MineFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@color/orange">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/header_mine"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="@mipmap/tou"
tools:ignore="RtlHardcoded" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/header_mine"
android:text="2151214436"
android:textColor="@color/white"
android:textSize="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:text="我的订单"
android:textColor="@android:color/black"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="全部订单>"
android:textSize="20sp" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/darker_gray" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/white"
android:orientation="horizontal"
android:padding="20dp">
<RadioButton
android:id="@+id/obligation_bt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/obligation"
android:gravity="center"
android:text="待付款" />
<RadioButton
android:id="@+id/receiving_bt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/receiving"
android:gravity="center"
android:text="待收货" />
<RadioButton
android:id="@+id/evaluate_bt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/evaluate"
android:gravity="center"
android:text="待评价" />
<RadioButton
android:id="@+id/change_bt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/change"
android:gravity="center"
android:text="退换修" />
</RadioGroup>
<ImageView
android:id="@+id/mi_iv"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@drawable/xiaomi" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/discounts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
leon:leftIcon="@drawable/discounts"
leon:leftText="优惠券" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/member"
android:layout_width="match_parent"
android:layout_height="wrap_content"
leon:leftIcon="@drawable/member"
leon:leftText="会员中心" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/wallet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
leon:leftIcon="@drawable/money"
leon:leftText="我的钱包" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/service"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
leon:leftIcon="@drawable/service"
leon:leftText="服务中心" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/millet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
leon:leftIcon="@drawable/millet"
leon:leftText="小米之家" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/supply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
leon:leftIcon="@drawable/supply"
leon:leftText="直供点" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/more"
android:layout_width="match_parent"
android:layout_height="wrap_content"
leon:leftIcon="@drawable/more"
leon:leftText="更多功能" />
<com.leon.lib.settingview.LSettingItem
android:id="@+id/install"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
leon:leftIcon="@drawable/install"
leon:leftText="设置" />
</LinearLayout>
实现代码：
public class MineFragment extends Fragment{
private String uri = "https://m.mi.com/user";
private View inflate;
private WebView mine_wv;
private CircleImageView header_mine;
private RadioButton obligation_bt;
private RadioButton receiving_bt;
private RadioButton evaluate_bt;
private RadioButton change_bt;
private ImageView mi_iv;
private LSettingItem discountsLi;
private LSettingItem memberLi;
private LSettingItem walletLi;
private LSettingItem serviceLi;
private LSettingItem milletLi;
private LSettingItem supplyLi;
private LSettingItem moreLi;
private LSettingItem installLi;
public MineFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
inflate = inflater.inflate(R.layout.fragment_mine, container, false);
initView(inflate);
initData();
return inflate;
}
private void initData() {
discountsLi.setmOnLSettingItemClick(new LSettingItem.OnLSettingItemClick() {
@Override
public void click() {
Intent intent=new Intent(getContext(), DiscountsActivity.class);
startActivity(intent);
}
});
}
private void initView(View inflate) {
header_mine = (CircleImageView) inflate.findViewById(R.id.header_mine);
obligation_bt = (RadioButton) inflate.findViewById(R.id.obligation_bt);
receiving_bt = (RadioButton) inflate.findViewById(R.id.receiving_bt);
evaluate_bt = (RadioButton) inflate.findViewById(R.id.evaluate_bt);
change_bt = (RadioButton) inflate.findViewById(R.id.change_bt);
mi_iv = (ImageView) inflate.findViewById(R.id.mi_iv);
discountsLi = (LSettingItem) inflate.findViewById(R.id.discounts);
memberLi = (LSettingItem) inflate.findViewById(R.id.member);
walletLi = (LSettingItem) inflate.findViewById(R.id.wallet);
serviceLi = (LSettingItem) inflate.findViewById(R.id.service);
milletLi = (LSettingItem) inflate.findViewById(R.id.millet);
supplyLi = (LSettingItem) inflate.findViewById(R.id.supply);
moreLi = (LSettingItem) inflate.findViewById(R.id.more);
installLi = (LSettingItem) inflate.findViewById(R.id.install);
}
}使用依赖：
implementation 'de.hdodenhof:circleimageview:2.2.0'
implementation 'com.leon:lsettingviewlibrary:1.3.0'它们都是有点击事件的：
我简单实现了一个优惠券的点击事件：
public class DiscountsActivity extends AppCompatActivity implements View.OnClickListener {
private Button returnBt;
private TabLayout tabLayout;
private ViewPager disVp;
private String[] strings={"未使用（0）","已使用","已失效"};
private List<Fragment> list=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_discounts);
initView();
initData();
}
private void initData() {
list.add(new UnusedFragment());
list.add(new HavebeenusedFragment());
list.add(new EfficacyFragment());
DiscountsAdapter adapter = new DiscountsAdapter(getSupportFragmentManager(), list, strings);
disVp.setAdapter(adapter);
tabLayout.setupWithViewPager(disVp);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
}
private void initView() {
returnBt = (Button) findViewById(R.id.return_bt);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
disVp = (ViewPager) findViewById(R.id.dis_vp);
returnBt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
DiscountsActivity.this.finish();
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.return_bt:
break;
}
}
}
写到这里，项目基本完成：谢谢观赏
因篇幅问题不能全部显示，请点此查看更多更全内容