私厨菜谱app的设计与实现（一）

一.菜谱引导界面的设计与实现

  1.项目介绍

   2.引导界面的设计与功能

  2.1.引导界面的布局设计

   2.2.引导界面的功能设计

二.代码部分

  1.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </androidx.viewpager.widget.ViewPager>
    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000000"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:background="#e5a">

        <RadioGroup
            android:id="@+id/radio_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="3">

            <RadioButton
                android:id="@+id/radio_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@null"
                android:drawableTop="@drawable/a"
                android:layout_weight="1"
                />



            <RadioButton
                android:id="@+id/radio_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@null"
                android:drawableTop="@drawable/b"
                android:layout_weight="1"
                />



            <RadioButton
                android:id="@+id/radio_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@null"
                android:drawableTop="@drawable/c"
                android:layout_weight="1"
                />

        </RadioGroup>

    </LinearLayout>
</LinearLayout>

注意:

android studio 3.5 中 android.support.v4.view.ViewPager 升级到 androidx.viewpager.widget.ViewPager

  2.  a.b.c.xml

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

    <item android:state_checked="false" android:drawable="@drawable/homepage"/>
    <item android:state_checked="true" android:drawable="@drawable/homepage2"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/collection"/>
<item android:state_checked="true" android:drawable="@drawable/collection2"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/personalcenter"/>
    <item android:state_checked="true" android:drawable="@drawable/personalcenter2"/>
</selector>

  3. OneFragment.TwoFragment.ThreeFragment.java

package com.example.ywjcookbook;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(container.getContext());
        textView.setText("第一个页面");
        return  textView;
    }
}

package com.example.ywjcookbook;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class TwoFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(container.getContext());
        textView.setText("第二个页面");
        return  textView;
    }
}

package com.example.ywjcookbook;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class ThreeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(container.getContext());
        textView.setText("第三个页面");
        return  textView;
    }
}

  4. MyFragmentAdapter.java

package com.example.ywjcookbook;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentAdapter extends FragmentPagerAdapter {
    //定义碎片列表
    private List<Fragment> fragmentList2;

    public MyFragmentAdapter(@NonNull FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        fragmentList2 =fragments;
    }

    //构建类的构造方法，用来接收从activity页面传递过来的碎片列表

    @NonNull
    @Override
    public Fragment getItem(int i) {
        return fragmentList2.get(i);
    }

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

5. MainActivity.java

package com.example.ywjcookbook;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {

    //创建相应的控件对象
    private ViewPager view_pager;  //创建ViewPager对象
    private RadioGroup radio_group; //创建单选按钮组
    private RadioButton radio_one; //创建“主页”按钮
    private RadioButton radio_two; //创建“收藏”按钮
    private RadioButton radio_three; //创建“个人中心”按钮

    //定义碎片类的实例变量以及碎片列表对象
    private Fragment onefragment,twofragment,threefragment;
    private List<Fragment> fragmentList = new ArrayList<>();
    private int position = 0 ;  //用于记录当前所在的页面，默认值为0表示选中第一个页面

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();    //控件的绑定
        initData();    //将三张碎片添加到ViewPager控件中
        initMove();    //滑屏时导航栏按钮随之切换
        initOnClick();   //单击导航栏按钮，碎片跟随切换

    }

    //创建initView()方法，并在该方法中绑定控件
    private  void initView(){
        view_pager = findViewById(R.id.view_pager);
        radio_group = findViewById(R.id.radio_group);
        radio_one = findViewById(R.id.radio_one);
        radio_two = findViewById(R.id.radio_two);
        radio_three = findViewById(R.id.radio_three);
    }

    //创建initData()方法，将碎片列表通过自定义适配器绑定到ViewPager控件上
    private  void  initData(){
        //将碎片进行实例化，并且存放到碎片数组
        onefragment = new OneFragment();
        twofragment = new TwoFragment();
        threefragment = new ThreeFragment();
        fragmentList.add(onefragment);
        fragmentList.add(twofragment);
        fragmentList.add(threefragment);
        //创建自定义适配器的实例
        MyFragmentAdapter adapter = new MyFragmentAdapter(this.getSupportFragmentManager(),fragmentList);
        //为ViewPager控件绑定适配器
        view_pager.setAdapter(adapter);
        //导航栏默认显示第一个卡片
        ((RadioButton)radio_group.getChildAt(position)).setChecked(true);
       // view_pager.setCurrentItem(0);
      //  radio_group.check(R.id.radio_one);
    }

    //创建initMove()方法，该方法中设定ViewPager控件的滑屏事件
    private  void initMove(){
        view_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                ((RadioButton)radio_group.getChildAt(i)).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    //创建initOnClick()方法，在该方法中添加RadioGroup控件的单击事件
    private  void  initOnClick() {
        radio_group.setOnCheckedChangeListener((group, checkedId) -> {
            if (checkedId == R.id.radio_two) {
                position = 1;
                view_pager.setCurrentItem(position);
            } else if (checkedId == R.id.radio_three) {
                position = 2;
                view_pager.setCurrentItem(position);
            } else {
                position = 0;
                view_pager.setCurrentItem(position);
            }
        });
    }

}

注意：((RadioButton)radio_group.getChildAt(position)).setChecked(true);

radio_group有几个元素就是几个，假如想在radio_group加一个view的黑杠是会报错的。