Как выровнять титру и изображение с помощью кнопки?

Question

Я хочу, чтобы моя кнопка выглядеть следующим образом:

Это мой текущий код:

<Button id="btn_login" title="SIGN IN" image="/images/signin-icon.png"></Button> 

Но то, что я получаю, что стрелка находится в крайнем левом положении, и название немного справа от центра. Похоже, что изображение занимает пространство слева.

Как правильно их выровнять?

Answer 1

Что вы должны сделать, это не использовать кнопку, а обычный вид. Как это:

<View id="btn_login"> 
    <View id="buttonWrapper"> 
     <Label id="signIn" /> 
     <ImageView id="signInImage" /> 
    </View> 
</View> 

Тогда в TSS:

"#btn_login": { 
    width: 200, 
    height: 50, 
    backgroundColor: "yellow", 
} 

"#buttonWrapper" :{ 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE, 
    layout: 'horizontal' 
} 

"#signIn": { 
    width: Ti.UI.SIZE, 
    color: "#ffffff" 
} 

"#signInImage: { 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE 
} 

Я сделал buttonWrapper в положение, в то же время оба элемента, а также позволяют ему быть по центру. Поскольку я не указываю left и right, он автоматически центрируется.

layout свойство будет следить за тем, чтобы элементы располагались рядом друг с другом, а не друг с другом.

Имея ширину Ti.UI.SIZE, будет автоматически задан размер по содержанию.

Теперь ... это будет выглядеть не так, как ваше изображение, но оно будет близко. Оттуда по игре с некоторыми шрифтами и позиционированием изображения, например, и он должен отлично работать!

Answer 2

Если вы не хотите писать много кода, то вы можете использовать Font Awesome long arrow right icon с названием кнопки. Причина использования шрифта заключается в том, что вы можете получить анимацию касания материала Material на кнопках Android.

Ниже пример того, как сделать это:

index.xml

<Button class="fa" title=" SIGN IN \uf178 " /> 

index.tss

".fa" : { 
    font : { fontFamily : 'fontawesome',fontSize : 19 } // you can change the font size here 
} 

Скачать fontawesome.ttf file here

Поместите этот .ttf файл в app-> assets-> шрифты папки, если папка шрифтов не существует, то создайте его и затем поместить файл. См. Ниже изображение размещения файла правильно.

Ваша кнопка должна выглядеть следующим образом (за исключением зеленого фона, который исходит от темы файла) :

Вы можете добавить больше пространства между ЮНИКОДу значка стрелки и Авторизироваться текста.