android 实现类似个人中心的界面设计

上效果图:
这里写图片描述
这里写图片描述

先理清设计思路:
1、外层用linearlayout包裹,linearlayout采用shape,搭上描边、圆角和填充背景色。
2、里层采用relativelayout填充进textview、imageview。
思路搞清后,很简单就两步。
先上布局代码:

    <LinearLayout style="@style/PersonalMainLayoutStyle" >

        <RelativeLayout style="@style/FindBottomStyle" >

            <TextView
                style="@style/PersonalTextStyle"
                android:text="我的订单" />

            <ImageView
                android:id="@+id/iv_drop_down"
                style="@style/PersonalRightIconStyle"
                android:src="@drawable/android_list_idex" />
        </RelativeLayout>
    </LinearLayout>

linearlayout布局属性代码:

    <style name="PersonalMainLayoutStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_margin">10dp</item>
        <item name="android:background">@drawable/background_corners</item>
        <item name="android:orientation">vertical</item>
        <item name="android:padding">1dp</item>
    </style>

relativelayout布局属性代码:

    <style name="FindBottomStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">30dp</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:background">@drawable/more_activity_item_selector_bottom_corners</item>
    </style>

textview和imageview的属性代码可以自己设计了。

下面是drawable的设计代码.
看到上边relativelayout的item中引用了drawable-more_activity_item_selector_bottom_corners,个人感觉好像没什么卵用,主要是linearlayout的drawable,但是我没试,还是贴出来吧
relativelayout-drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ffffe381" />
            <stroke android:width="0.0dip" android:color="#ffcccccc" />
            <corners android:bottomLeftRadius="6.0dip" android:bottomRightRadius="6.0dip" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#ffffffff" />
            <stroke android:width="0.0dip" android:color="#ffcccccc" />
            <corners android:bottomLeftRadius="6.0dip" android:bottomRightRadius="6.0dip" />
        </shape>
    </item>
</selector>

linearlayout-drawable:

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

    <item><shape>
            <solid android:color="#ffffffff" />

            <stroke android:width="1.0dip" android:color="#ffcccccc" />

            <corners android:radius="6.0dip" />
        </shape></item>

</selector>
  • 4
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Android Studio是一款基于IntelliJ IDEA开发的集成开发环境,用于开发安卓应用程序。仿Bilibili界面设计源代码则是指使用Android Studio开发一个类似Bilibili应用的界面布局和功能实现的源代码。 首先,在Android Studio中新建一个项目,命名为Bilibili或者其他你喜欢的名字。接着创建各种资源文件,包括图标、背景图片、音频文件等,以使界面更加逼真。 接下来开始设计界面布局。仿Bilibili的界面通常是分为几个主要模块的,如导航栏、首页、订阅、排行榜、动态、个人中心等。可以使用LinearLayout、RelativeLayout或者ConstraintLayout来实现这些模块的布局,具体根据实际需求进行调整。 然后,根据Bilibili的设计风格和UI要求,在各个模块中添加相应的控件,如TextView、ImageView、Button、RecyclerView、TabLayout等。通过设置它们的属性,如文本、背景、图片等,使得界面看起来更加类似Bilibili。 在界面布局完成后,还需要为控件添加相应的交互功能。例如,设置导航栏中的按钮点击事件,实现页面之间的跳转;为首页中的RecyclerView添加监听器,实现点击某个条目后的详情页面显示等。 最后,进行调试、测试和优化。在Android Studio中可以使用模拟器或者连接真机进行测试,确保界面的功能和逻辑正确无误。对于可能存在的性能问题,可以使用工具进行性能分析和优化。 总结来说,仿Bilibili界面设计源代码的实现主要包括创建项目、设计界面布局、添加控件和交互功能,以及调试、测试和优化。通过这些步骤,可以实现一个类似Bilibili应用的界面,并且能够正常运行和展示相应的功能和特性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值