Hydrogenn icon indicating copy to clipboard operation
Hydrogenn copied to clipboard

主页热榜排版美化,移除冗余圆角、边距,增加行间距,减小字重,让界面更清爽

Open orz12 opened this issue 2 years ago • 1 comments

由于代码都压缩了,不能提交pr,所以直接在这里说明 修改效果如图 image 其中涉及到修改的代码为: 1、/mods/muk.lua,356行日间主题的cardedge从"#FFE0E0E0"改为非常浅的灰色"#FFF6F6F6" 2、/home.lua,itemc2样式(主页)改为如下

itemc2=
{
  LinearLayout;
  layout_width="-1";
  orientation="horizontal";
  BackgroundColor=cardedge;

  {
    CardView;
    layout_gravity="center";
    layout_height="-2";
    CardBackgroundColor=cardedge,
    Elevation="0";
    layout_width="-1";
    layout_margin="0dp";
    layout_marginTop="4dp";
    layout_marginBottom="0dp";
    radius="0dp";
    {
      CardView;
      CardElevation="0dp";
      CardBackgroundColor=backgroundc;
      Radius="0dp";
      layout_margin="0px";
      layout_marginTop="0px";
      layout_marginBottom="0px";
      layout_width="-1";
      layout_height="-1";
      {
        LinearLayout;
        ripple="圆自适应",

        layout_height="fill";
        id="background";
        padding="23dp";
        layout_width="fill";
        {
          TextView;
          id="链接2";
          textSize="0sp";
        };
        {
          LinearLayout;
          orientation="vertical";
          {
            TextView;
            textSize="14sp";
            lineHeight="20sp";
            id="标题2";
            textColor=textc;
            Typeface=字体("product-Bold");
          };
          {
            TextView;
            textSize="12sp";
            lineHeight="19sp";
            MaxLines=3;--设置最大输入行数
            ellipsize="end",
            id="文章2";
            textColor=stextc;
            layout_marginTop="10dp";
            Typeface=字体("product");
          };
          {
            LinearLayout;
            layout_marginTop="10dp";
            orientation="horizontal";
            {
              ImageView;
              layout_gravity="center",
              layout_height="16dp",
              layout_width="16dp",
              src=图标("vote_up"),
              ColorFilter=textc;
            };
            {
              TextView;
              id="点赞2";
              textSize="12sp",
              layout_marginLeft="6dp",
              textColor=textc;
              Typeface=字体("product");
            };
            {
              ImageView;
              layout_marginLeft="24dp",
              src=图标("message"),
              ColorFilter=textc;
              layout_height="16dp",
              layout_width="16dp",
              layout_gravity="center",
            };
            {
              TextView;
              layout_marginLeft="6dp",
              id="评论2";
              textColor=textc;
              textSize="12sp",
              Typeface=字体("product");
            };
          };
        };
      };
    };
  };
};

3、/home.lua,itemc样式(热榜)改为如下

itemc=
{
  LinearLayout,

  layout_width="-1",
  -- layout_height='56dp';
  --id="fpll",
  background=cardedge,
  {
    CardView;
    layout_margin="0dp";
    layout_marginTop="4dp";
    layout_marginBottom="0dp";
    layout_gravity='center';
    -- layout_marginLeft="0%w";
    Elevation='0';
    layout_width='fill';
    layout_height='-2';
    radius='0dp';
    id="_root",
    CardBackgroundColor=cardedge,
    {
      CardView;
      CardElevation="0dp";
      CardBackgroundColor=backgroundc;
      Radius="0dp";
      layout_margin="0px";
      layout_width="-1";
      layout_height="-1";
      {
        LinearLayout;
        layout_height="fill";
        ripple="圆自适应",

        layout_width="fill";

        {
          LinearLayout;
          orientation="horizontal",
          id="hot_background";
          layout_width="fill";
          {
            LinearLayout;
            padding="6dp";
            paddingTop="15dp";
            paddingBottom="15dp";

            {
              layout_marginLeft="10dp";
              TextView;
              textSize="16sp";
              Typeface=字体("product");
              id="排行";
              textColor=primaryc;
            };
            {
              TextView;
              textSize="0sp";
              id="导向链接",
              Typeface=字体("product");
            };
            {
              LinearLayout;
              layout_width="60%w",
              layout_marginLeft="10dp";
              orientation="vertical";
              {
                TextView;
                textColor=textc;
                textSize="14sp";
                lineHeight="22sp";
                Typeface=字体("product-Medium");
                id="标题",
              };
              {
                TextView;
                textColor=stextc;
                textSize="13sp";
                layout_marginTop="8dp";
                id="热度",
                Typeface=字体("product");
              };
            };
          };
          {
            CardView;
            Elevation='0';
            radius='2dp';
            --  id="_root",
            layout_gravity="center_vertical",
            CardBackgroundColor=cardbackroundc,
            {
              ImageView;
              layout_width='102dp';
              layout_gravity="center",
              layout_height="63dp",
              id="热图片",
              ScaleType=ScaleType.CENTER_CROP,
            };
          };
        };
      };
    };
  };
};

orz12 avatar Nov 18 '22 07:11 orz12

忘写了 还有字间距 在id为标题2、文章2、标题三处各增加一行 letterSpacing="0.02"

orz12 avatar Nov 18 '22 09:11 orz12

现在风格是material3加material2混合风格 所以卡片又改回material2风格了

huajiqaq avatar Jun 23 '23 06:06 huajiqaq