zoukankan      html  css  js  c++  java
  • 专属空间一-主界面设计

      从昨天开始构思这个项目的,构思了一天,从自己到底要开发一款怎样的软件到确定目标用了几个小时。

    现在软件技术已经非常的成熟,各种各样的软件也都有人做了。自己想了又想,结合当代人的特点,开发一款比较全能的软件。也就是说里面涵盖的东西比较多。有这个想法以后就开时找素材,应该开发几个页面,怎样布局,加入哪些小程序在这个软件里面。由于说是自己的基础还是非常薄弱的,只能说是在网络找到相应的教学视频,跟着一步一步去做,然后再去回头看每天所做过的内容,吸收相应的知识点,其实也就是说,在积累学习的经验而已。

      首先说一下自己目前所确定的内容有什么:五子棋(娱乐时刻)、计账本(清晰的一天)、语音词典(不一样的表达)、网络视频播放(你眼中的世界)、音乐播放器(听世界的美好)、教务系统(交互)、历史上的今天、天气(今天的心情)、新闻(掌上资讯)括号里面的是自己给取的名字。哈哈哈哈~~~

      准备1-2天完成一项。

      接下来进入今天的正题:主界面的设计

      

      然后是设计跳转到主界面

      

    下面分页的用的是radiogroup和radiobutton组合中间用的是fragment添加到此布局页面之中,下面还设置了点击的效果的变换

    radiobutton中的button属性设置为@null,不显示按钮的样式,然后设计加入图片drawableTop,图片的效果单独设置一下,同时设置监听,点击下面的按钮显示的是对应的fragment,对应的下面的文字也是设置了效果的。还完成了我的页面这几项的跳转。

    以下为今天编写的代码:

    MainActivity和xml

    package com.example.personspace;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentManager;
    import androidx.fragment.app.FragmentTransaction;
    
    import android.os.Bundle;
    import android.widget.RadioGroup;
    
    public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
        RadioGroup mainRg;
        //声明三个按钮对应的Fragment对象
        Fragment starFrag,parnterFrag,meFrag;
        private FragmentManager manager;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mainRg=findViewById(R.id.main_rg);
            //设置监听点击了那个单选按钮
            mainRg.setOnCheckedChangeListener(this);
            //创建碎片对象
            starFrag=new StarFragment();
            parnterFrag=new ParnterFragment();
            meFrag=new MeFragment();
            //将三个Fragment进行动态加载,一起加载到布局当中;replace         add/hide/show
            addFragmentPage();
    
        }
    
        /**
         * @des 将主页当中的碎片一起加载到布局当中,有用的显示,无用的隐藏
         */
    
        private void addFragmentPage() {
            //创建碎片管理者对象
            manager=getSupportFragmentManager();
            //创建碎片处理事务对象
            FragmentTransaction transaction=manager.beginTransaction();
            //将三个Fragment统一添加到布局当中
            transaction.add(R.id.main_layout_center,starFrag);
            transaction.add(R.id.main_layout_center,parnterFrag);
            transaction.add(R.id.main_layout_center,meFrag);
            //隐藏后面两个
            transaction.hide(parnterFrag);
            transaction.hide(meFrag);
            //提交碎片改变后的事物
            transaction.commit();
    
    
        }
    
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            FragmentTransaction transaction=manager.beginTransaction();
            switch (checkedId) {
                case R.id.main_rb_star:
                    transaction.hide(parnterFrag);
                    transaction.hide(meFrag);
                    transaction.show(starFrag);
    
                    break;
                case R.id.main_rb_parnter:
                    transaction.hide(starFrag);
                    transaction.hide(meFrag);
                    transaction.show(parnterFrag);
    
                    break;
                case R.id.main_rb_me:
                    transaction.hide(starFrag);
                    transaction.hide(parnterFrag);
                    transaction.show(meFrag);
    
                    break;
            }
            transaction.commit();
        }
    }

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:layout_height="match_parent"
        tools:context=".MainActivity">
        <TextView
            android:id="@+id/main_tv_title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="@string/app_name"
            android:background="@color/lightyellow"
            android:gravity="center"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@color/lightpink"
            ></TextView>
        <RadioGroup
            android:id="@+id/main_rg"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:orientation="horizontal"
            android:background="@color/lightyellow"
            android:layout_alignParentBottom="true"
            android:padding="5dp">
            <RadioButton
                android:id="@+id/main_rb_star"
                style="@style/main_rb"
                android:drawableTop="@drawable/main_rb_star"
                android:text="@string/lable_star"
                android:checked="true"/>
    
            <RadioButton
                android:id="@+id/main_rb_parnter"
                style="@style/main_rb"
                android:drawableTop="@drawable/main_rb_parnter"
                android:text="@string/lable_parnter"
                />
    
            <RadioButton
                android:id="@+id/main_rb_me"
                style="@style/main_rb"
                android:drawableTop="@drawable/main_rb_me"
                android:text="@string/lable_me"
                />
    
        </RadioGroup>
        <!--中间部分使用占位,会用Fragment进行布局-->
        <LinearLayout
            android:id="@+id/main_layout_center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_below="@+id/main_tv_title"
            android:layout_above="@+id/main_rg"/>
    
    </RelativeLayout>

    MeFragment对应的xml

    package com.example.personspace;
    
    import android.content.Intent;
    import android.os.Bundle;
    
    import androidx.annotation.NonNull;
    import androidx.annotation.Nullable;
    import androidx.fragment.app.Fragment;
    
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import com.example.personspace.Me.AboutActivity;
    import com.example.personspace.Me.FeedBackActivity;
    import com.example.personspace.Me.FuctionActivity;
    import com.example.personspace.Me.UpdateActivity;
    
    import de.hdodenhof.circleimageview.CircleImageView;
    
    /**
     * A simple {@link Fragment} subclass.
    
     */
    public class MeFragment extends Fragment {
        private TextView About,Function,Update,FeedBack;
    
        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_me, container, false);
           About=view.findViewById(R.id.mefrag_tv_about);
           Function=view.findViewById(R.id.mefrag_tv_function);
           Update=view.findViewById(R.id.mefrag_tv_update);
           FeedBack=view.findViewById(R.id.mefrag_tv_feedback);
    
    
            About.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(getActivity(), AboutActivity.class);
                    startActivity(intent);
                }
            });
            Function.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(getActivity(), FuctionActivity.class);
                    startActivity(intent);
                }
            });
            Update.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(getActivity(), UpdateActivity.class);
                    startActivity(intent);
                }
            });
            FeedBack.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(getActivity(), FeedBackActivity.class);
                    startActivity(intent);
                }
            });
    
            return view;
    
        }
    
    
    
    }
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MeFragment"
        android:background="@mipmap/me"
        android:orientation="vertical">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/mefrag_iv"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            app:civ_border_width="2dp"
            app:civ_border_color="@color/grey"
            android:background="@mipmap/touxiang"/>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:layout_marginTop="150dp">
            <View
                android:layout_width="4dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:background="@color/colorAccent"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="10dp"/>
            <TextView
                android:id="@+id/mefrag_tv_about"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/about_app"
                android:textColor="@color/pink"
                android:textSize="20sp"
                android:gravity="center|left"
                android:onClick="About"
                />
    
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/white"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
            <View
                android:layout_width="4dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:background="@color/colorAccent"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="10dp"/>
            <TextView
                android:id="@+id/mefrag_tv_function"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/function"
                android:textSize="20sp"
                android:textColor="@color/pink"
                android:gravity="center|left"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/white"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
            <View
                android:layout_width="4dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:background="@color/colorAccent"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="10dp"/>
            <TextView
                android:id="@+id/mefrag_tv_update"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/update"
                android:textSize="20sp"
                android:textColor="@color/pink"
                android:gravity="center|left"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/white"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
            <View
                android:layout_width="4dp"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:background="@color/colorAccent"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="10dp"/>
            <TextView
                android:id="@+id/mefrag_tv_feedback"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/feedback"
                android:textSize="20sp"
                android:textColor="@color/pink"
                android:gravity="center|left"/>
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@color/white"/>
    
    
    
    
    
    </LinearLayout>

    列举一个功能的跳转ABOUT.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:layout_height="match_parent"
        tools:context=".Me.AboutActivity"
        android:orientation="vertical"
        android:background="@mipmap/meback"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="@string/about_app"
            android:gravity="center"
            android:textSize="25dp"
            android:textStyle="bold"/>
    
        <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="                         该应用集成了多种小型软件。 "
        />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                         现在主要包括的有:五子棋(娱乐时刻)、 "
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                         计账本(清晰的一天)、语音词典(不一 "
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                          样的表达)、网络视频播放(你眼中的世界) "
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                          音乐播放器(听世界的美好)、教务系统 "
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                          (交互)、历史上的今天、天气(今天的 "
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="                         心情)、新闻(掌上资讯) "
            />
    
    
    
    </LinearLayout>

    RadioButton和字体的变换xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:drawable="@mipmap/ib_me_focus"/>
        <item android:state_checked="false" android:drawable="@mipmap/ib_me_normal"/>
        <item android:drawable="@mipmap/ib_me_normal"/>
    
    </selector>
    
    
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:drawable="@mipmap/ib_parnter_focus"/>
        <item android:state_checked="false" android:drawable="@mipmap/ib_parnter_normal"/>
        <item android:drawable="@mipmap/ib_parnter_normal"/>
    
    </selector>
    
    
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:drawable="@mipmap/ib_star_focus"/>
        <item android:state_checked="false" android:drawable="@mipmap/ib_star_normal"/>
        <item android:drawable="@mipmap/ib_star_normal"/>
    
    </selector>
    
    
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:color="@color/pink"/>
        <item android:state_checked="false" android:color="@color/grey"/>
        <item  android:color="@color/grey"/>
    
    </selector>

    还设置了上面的状态栏,还有v-19和v-21之上的情况,下面三个分别是

        <!--全屏显示无透明状态栏-->
        <style name="TranslucentTheme" parent="AppTheme">
            <item name="android:windowFullscreen">true</item>
        </style>
    
        <!--全屏显示,有透明的状态栏-->
        <style name="statusBar" parent="AppTheme"></style>
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <!-- 从19版本开始多属性需要设置-->
        <!-- 全屏显示,无状态栏的-->
        <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowTranslucentStatus">true</item>
            <item name="android:windowTranslucentNavigation">true</item>
            <item name="android:windowFullscreen">true</item>
        </style>
    
        <!--全屏显示,有透明的状态栏-->
        <style name="statusBar" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowTranslucentNavigation">true</item>
            <item name="android:windowTranslucentStatus">true</item>
        </style>
    
    </resources>
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <!-- 从21版本开始多属性需要设置-->
        <!-- 全屏显示,无状态栏的-->
        <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowTranslucentStatus">false</item>
            <item name="android:windowTranslucentNavigation">true</item>
            <!-- 否则导航栏就会呈现系统默认的灰色-->
            <item name="android:statusBarColor">@android:color/transparent</item>
            <item name="android:windowFullscreen">true</item>
        </style>
    
        <!--全屏显示,有透明的状态栏-->
        <style name="statusBar" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowTranslucentNavigation">true</item>
            <item name="android:windowTranslucentStatus">false</item>
            <item name="android:statusBarColor">@android:color/transparent</item>
        </style>
    
    </resources>

    今天学到的新知识还有对图片的形状进行变换,比如圆形

    注意的是要导入依靠:implementation 'de.hdodenhof:circleimageview:3.1.0'

     而且图片路径写法要用src

    例如:android:src="@mipmap/touxiang"

    今天的开发到此结束

     

  • 相关阅读:
    LeetCode:230. 二叉搜索树中第K小的元素
    LeetCode:229. 求众数 II
    LeetCode:228. 汇总区间
    LeetCode:225. 用队列实现栈
    LeetCode:209. 长度最小的子数组
    LeetCode:208. 实现 Trie (前缀树)
    疯狂的订餐系统-软件需求分析挑战之旅 【转】
    产品需求文档(PRD)的写作 【转】
    软件需求文档标准格式
    通过实例编写开发规范文档 【转】
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/13324829.html
Copyright © 2011-2022 走看看